最近在搞前端开发，遇到个需求，要实现下面这样的列表：
点击某行的修改按钮，该行数据可编辑，并且按钮会随之变化：
点击删除，弹出确认弹框，点确认删除该行数据。
需求描述：
其中计划数量是要支持动态变化的，而阶段数量也要支持动态变化。比方说图中是3个计划，每个计划包含四个阶段。可能过段时间数据变成了2个计划，每个计划3个阶段，数据这样改变后，前端表格也要能正常显示。
而后台的接口也没提供，需要我自行确定了数据结构，做出显示逻辑。那么首先思考一下，难点有两个，一个是二级表头，一个是表头要支持动态变化。
我们的项目用的是用ElementUI库来实现布局的。表格组件对应的是el-table，在官方文档上查了下，是有官方的二级表头Demo的：
ElementUI官网链接：/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条数据
