<template>
<div class="box">
<el-button
class="addBtn"
type="primary "
@click="addRow"
size="small"
style="margin-bottom:10px;"
>增加</el-button
>
<el-table
width
:data="
tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
"
element-loading-text="Loading"
border
fit
highlight-current-row
>
<el-table-column
label="序号"
align="center"
type="index"
width="80"
></el-table-column>
<el-table-column label="电话" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.tel"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<el-table-column label="地址" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.address"
:disabled="!scope.row.disabled"
></el-input>
</template>
</el-table-column>
<!-- 此处省略了一些按钮代码，后面会讲到-->
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button
v-if="scope.row.edit"
type="success"
size="mini"
icon="el-icon-circle-check-outline"
@click="confirmEdit(scope.row)"
>保存
</el-button>
<el-button
v-else
type="primary"
size="mini"
@click="startEdit(scope.row)"
>编辑
</el-button>
<el-button
v-if="scope.row.edit"
class="cancel-btn"
size="mini"
icon="el-icon-refresh"
type="warning"
@click="cancelEdit(scope.row)"
>取消
</el-button>
<el-button
type="danger"
size="mini"
@click="handleDelete(scope.$index, tableData)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
align="center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[1, 5, 10, 20]"
:page-size="pageSize"
layout="total, prev, pager, next"
:total="tableData.length"
>
</el-pagination>
</div>
</template>
<script>
export default {
name: "test2",
data() {
return {
//表格数据
tableData: [
{
tel: "0531",
address: "xx",
edit: false,
disabled: false
},
{
tel: "0531",
address: "xx",
edit: false,
disabled: false
}
],
// 分页
currentPage: 1, // 当前页码
pageSize: 10 // 每页的数据条数
};
},
methods: {
//删除
handleDelete(index, row) {
row.splice(index, 1);
this.$message({
message: "已删除!",
type: "success"
});
},
// 编辑
startEdit(row) {
row.edit = !row.edit;
row.disabled = true;
},
// 保存
confirmEdit(row) {
row.edit = false;
row.disabled = false;
row.originalValue = row.address;
if (row.tel == null || row.address == null) {
this.loadAppConfigs();
return;
}
let name = this.params.name;
const p = { ...row, name };
// 调用更新方法
updateXXXXx(p);
this.$message({
message: "已修改!",
type: "success"
});
row.disabled = false;
if (row.id === undefined) {
// 重新加载该页面
}
},
// 取消
cancelEdit(row) {
row.address = row.originalValue;
row.edit = false;
row.disabled = false;
this.$message({
message: "已取消修改!",
type: "warning"
});
if (row.id === undefined) {
// 重新加载该页面
}
},
// 增加行
addRow() {
let newLine = {
tel: this.tel,
address: this.address,
edit: true, // 新增时处于可编辑状态，所以按钮是保存和取消
disabled: true // 打开编辑状态
};
this.tableData.unshift(newLine); // 移到第一行
},
//表格分页
//列表分页
handleSizeChange(val) {
this.currentPage = 1;
this.pageSize = val;
},
handleCurrentChange(val) {
this.currentPage = val;
}
}
};
</script>
<style scoped>
input[disabled],
input:disabled,
input.disabled {
color: #000000;
-webkit-text-fill-color: #000000;
-webkit-opacity: 1;
opacity: 1;
font-weight: 900;
}
.box {
padding: 20px;
}
.box .addBtn {
float: right;
}
</style>