最近在搞前端开发,遇到个需求,要实现下面这样的列表:
点击某行的修改按钮,该行数据可编辑,并且按钮会随之变化:
点击删除,弹出确认弹框,点确认删除该行数据。
需求描述:
其中计划数量是要支持动态变化的,而阶段数量也要支持动态变化。比方说图中是3个计划,每个计划包含四个阶段。可能过段时间数据变成了2个计划,每个计划3个阶段,数据这样改变后,前端表格也要能正常显示。
而后台的接口也没提供,需要我自行确定了数据结构,做出显示逻辑。那么首先思考一下,难点有两个,一个是二级表头,一个是表头要支持动态变化。
我们的项目用的是用ElementUI库来实现布局的。表格组件对应的是el-table,在官方文档上查了下,是有官方的二级表头Demo的:
ElementUI官网链接:https://element.eleme.cn/2.0/#/zh-CN/component/table
官网给出的Demo,二级表头是写死的,不符合我们要求。不过它的demo给我提供了思路,那就是二级表头要用两层嵌套的el-table-column来实现。至于表头动态变化嘛,那就先确定了数据结构再说吧。
根据需求,造出了所需要的最简单的一组数据(包含两条数据):
list =
[
{
id: '123',
name: '学校1',
planList: [
{
planLable: '计划目标',
stageList: [
{ stageLable: '第一阶段', value: '100' },
{ stageLable: '第二阶段', value: '200' },
{ stageLable: '第三阶段', value: '300' },
{ stageLable: '第四阶段', value: '400' }
]
},
{
planLable: '基本目标',
stageList: [
{ stageLable: '第一阶段', value: '10' },
{ stageLable: '第二阶段', value: '20' },
{ stageLable: '第三阶段', value: '30' },
{ stageLable: '第四阶段', value: '40' }
]
},
{
planLable: '冲刺目标',
stageList: [
{ stageLable: '第一阶段', value: '1000' },
{ stageLable: '第二阶段', value: '2000' },
{ stageLable: '第三阶段', value: '3000' },
{ stageLable: '第四阶段', value: '4000' }
]
}
]
},
{
id: '456',
name: '学校2',
planList: [
{
planLable: '计划目标',
stageList: [
{ stageLable: '第一阶段', value: '1001' },
{ stageLable: '第二阶段', value: '2001' },
{ stageLable: '第三阶段', value: '3001' },
{ stageLable: '第四阶段', value: '4001' }
]
},
{
planLable: '基本目标',
stageList: [
{ stageLable: '第一阶段', value: '101' },
{ stageLable: '第二阶段', value: '201' },
{ stageLable: '第三阶段', value: '301' },
{ stageLable: '第四阶段', value: '401' }
]
},
{
planLable: '冲刺目标',
stageList: [
{ stageLable: '第一阶段', value: '10001' },
{ stageLable: '第二阶段', value: '20001' },
{ stageLable: '第三阶段', value: '30001' },
{ stageLable: '第四阶段', value: '40001' }
]
}
]
}
]
上面只有两条数据,就对应表格中的两行。
把这个数据list传入表格进行显示。
<el-table v-loading="loading" :data="tableData" border style="width: 100%" row-key="id" stripe>
<el-table-column align="center" fixed type="index" :index="indexMethod" label="序号" width="50" />
<el-table-column align="center" fixed prop="name" label="分校名称" />
<el-table-column v-for="(planItem, index) in planList" :key="index" align="center" :label="planItem.planLable">
<el-table-column v-for="(stageItem, indexChild) in planItem.stageList" :key="index+'-'+indexChild" align="center" :label="stageItem.stageLable">
<template slot-scope="scope">
<span v-if="scope.row.isEditing">
<el-input v-model="scope.row.planList[index].stageList[indexChild].value" size="mini" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')" />
span>
<span v-else>{{ scope.row.planList[index].stageList[indexChild].value }}span>
template>
el-table-column>
el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" @click="handleData(scope.row, scope.$index)">{{ scope.row.isEditing?'保存':"修改" }}el-button>
<el-button v-if="!scope.row.isEditing" size="mini" type="danger" @click="deleteData(scope.row, scope.$index)">删除el-button>
<el-button v-else size="mini" @click="cancelEdit(scope.row, scope.$index)">取消el-button>
template>
el-table-column>
el-table>
其中第一行tableData就是我们自己造的数据。而二级表头传入的planList则是按如下规则获取的数据:
this.tableData = list;//list是之前构造好的两条数据
this.planList = (list[0] && list[0]['planList']) || [];
查看table里planList的用处就知道,这里planList只起到获取其子元素下标的作用,所以planList取了tableData的第一条数据(实际取哪一条都可以)。
<template>
<el-table v-loading="loading" :data="tableData" border style="width: 100%" row-key="id" stripe>
<el-table-column align="center" fixed type="index" label="序号" width="50" />
<el-table-column align="center" fixed prop="name" label="分校名称" />
<el-table-column v-for="(planItem, index) in planList" :key="index" align="center" :label="planItem.planLable">
<el-table-column v-for="(stageItem, indexChild) in planItem.stageList" :key="index+'-'+indexChild" align="center" :label="stageItem.stageLable">
<template slot-scope="scope">
<span v-if="scope.row.isEditing">
<el-input v-model="scope.row.planList[index].stageList[indexChild].value" size="mini" placeholder="请输入" oninput="value=value.replace(/[^\d]/g,'')" />
</span>
<span v-else>{{ scope.row.planList[index].stageList[indexChild].value }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column align="center" fixed="right" label="操作" width="150">
<template slot-scope="scope">
<el-button size="mini" @click="handleData(scope.row, scope.$index)">{{ scope.row.isEditing?'保存':"修改" }}</el-button>
<el-button v-if="!scope.row.isEditing" size="mini" type="danger" @click="deleteData(scope.row, scope.$index)">删除</el-button>
<el-button v-else size="mini" @click="cancelEdit(scope.row, scope.$index)">取消</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
loading: false,
// 表格组件 列表数据对象
tableData: [],
planList: [],
editRowJson: ''
};
},
created() {
this.initData();
},
methods: {
/**
* @method initData
* @description 初始化数据
*/
initData() {
this.getList();
},
/**
* @description 获取列表
* @method getList
*/
getList() {
const list = [
{
id: '123',
name: '学校1',
planList: [
{
planLable: '计划目标',
stageList: [
{ stageLable: '第一阶段', value: '100' },
{ stageLable: '第二阶段', value: '200' },
{ stageLable: '第三阶段', value: '300' },
{ stageLable: '第四阶段', value: '400' }
]
},
{
planLable: '基本目标',
stageList: [
{ stageLable: '第一阶段', value: '10' },
{ stageLable: '第二阶段', value: '20' },
{ stageLable: '第三阶段', value: '30' },
{ stageLable: '第四阶段', value: '40' }
]
},
{
planLable: '冲刺目标',
stageList: [
{ stageLable: '第一阶段', value: '1000' },
{ stageLable: '第二阶段', value: '2000' },
{ stageLable: '第三阶段', value: '3000' },
{ stageLable: '第四阶段', value: '4000' }
]
}
]
},
{
id: '456',
name: '学校2',
planList: [
{
planLable: '计划目标',
stageList: [
{ stageLable: '第一阶段', value: '1001' },
{ stageLable: '第二阶段', value: '2001' },
{ stageLable: '第三阶段', value: '3001' },
{ stageLable: '第四阶段', value: '4001' }
]
},
{
planLable: '基本目标',
stageList: [
{ stageLable: '第一阶段', value: '101' },
{ stageLable: '第二阶段', value: '201' },
{ stageLable: '第三阶段', value: '301' },
{ stageLable: '第四阶段', value: '401' }
]
},
{
planLable: '冲刺目标',
stageList: [
{ stageLable: '第一阶段', value: '10001' },
{ stageLable: '第二阶段', value: '20001' },
{ stageLable: '第三阶段', value: '30001' },
{ stageLable: '第四阶段', value: '40001' }
]
}
]
}
];
// 拿到列表数据
this.tableData = list;
this.planList = (list[0] && list[0]['planList']) || [];
},
/**
* @method handleData
* @description 编辑或者保存数据
*/
handleData(row, index) {
// 如果其他行正在编辑,必须先保存
for (const schoolItem of this.tableData) {
if (schoolItem.isEditing && schoolItem.id !== row.id) {
this.$message({
type: 'info',
message: '请先保存正在编辑的行'
});
return;
}
}
if (row.isEditing) {
// 保存
for (const planItem of row.planList) {
// 有数据为空则不保存
for (const stageItem of planItem.stageList) {
if (stageItem.value === '') {
this.$message({
type: 'info',
message: '数据不能为空'
});
return;
}
}
}
this.$set(row, 'isEditing', false)
} else {
// 编辑
this.editRowJson = JSON.stringify(row);
this.$set(row, 'isEditing', true)
}
},
/**
* @method cancelEdit
* @description 退出编辑
*/
cancelEdit(row, index) {
var editRow = JSON.parse(this.editRowJson);
row.planList = editRow.planList;
row.isEditing = !row.isEditing;
},
/**
* @method deleteData
* @description 点击删除
*/
deleteData(row, index) {
this.$confirm('是否删除本条?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.tableData.splice(index, 1);
})
.catch(err => {
console.log(err)
this.$message({
type: 'info',
message: '已取消'
});
});
}
}
};
</script>
上面的代码除了能按需求显示列数变化的数据外,还做到了如下功能:
1.根据某一行是否正在编辑,动态确定“保存”、“取消”或者“修改”按钮的显示。
其中是否可编辑是通过v-if控制 el-input 或者 span 元素的显示来实现的。el-input 可编辑, span 不可编辑。
2.修改了数据后点击了“取消”按钮,数据要能恢复到修改前。
这里实现的思路是,修改前,把该行数据转成json保存。如果用户点击了“取消”,则从json恢复数据。
3.保证一次只能修改一行,要修改其他行,必须先保存或者取消当前修改(因为上面第二条里json字符串存储的只是最后一次点击的那一行数据,如果允许连续点击的话,取消后数据会乱。)
这里是通过遍历所有行数据,如果找到一个处于编辑状态且该行id与本行不同的,说明有其它行处于编辑状态。
4.限制只能输入数字,由如下代码实现。
oninput="value=value.replace(/[^\d]/g,'')"
5.删除某行数据的实现:
this.tableData.splice(index, 1);//删除从下标index开始的1条数据