您现在的位置是：网站首页> 编程资料编程资料

Element Table行的动态合并及数据编辑示例_vue.js_

2023-05-24 363人已围观

简介 Element Table行的动态合并及数据编辑示例_vue.js_

正文

先描述一下需求,看下图

1：动态合并行，如图所示，第一列全部合并，第二列和第三列第四列根据名称进行合并

2：可以动态编辑第三列和第四列，并且只能编辑属于此合并行的第三列和第四列，比如第一个编辑按钮点击后，只有前三行可以编辑

3：第一列的数据是根据第三列相加得来的

4：点击快捷填写，可以快速填写第三列和第四列

思路

1：第二列和第三列第四列根据名称进行合并

后台根据名称进行排序，前台通过循环解析名称来知道哪一行需要合并，这个从网上找了一个自己改了下。

 第一列特殊情况根据上面的思路做简单修改

element代码: span-method="cellMerge"

vue代码：

//合并单元格,此方法需要后台进行名字进行排序 cellMerge({ row, column, rowIndex, columnIndex }) { let length = this.tableData3.length; //第0列比较特殊，单独合并 if (columnIndex === 0) { const _row = this.spanArrOne[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } //1 2 5列进行合并 if (columnIndex === 1 || columnIndex === 2 || columnIndex === 5) { const _row = this.spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col }; } }, //1 2 5列合并的数据 getSpanArr(data) { for (var i = 0; i < data.length; i++) { if (i === 0) { this.spanArr.push(1); this.pos = 0; } else { // 判断当前元素与上一个元素是否相同 if (data[i].name === data[i - 1].name) { this.spanArr[this.pos] += 1; //需要合并的行数 this.spanArr.push(0); //新增被合并的行 } else { this.spanArr.push(1); this.pos = i; //新的需要合并的第几行数 } } } }, //0列合并的数据 getSpanArrOne(data) { for (var i = 0; i < data.length; i++) { if (i === 0) { this.spanArrOne.push(1); this.posOne = 0; } else { this.spanArrOne[this.posOne] += 1; //需要合并的行数 this.spanArrOne.push(0); //新增被合并的行 } } console.log(this.spanArrOne, " this.spanArrOne"); },

2：可以动态编辑第三列和第四列解决

   添加template模块，里面添加input输入框和span标签，通过属性进行控制，我是通过取出后台数据，遍历后添加了自定义属性editing来控制的，为了只能编辑通过名称合并的第三列和第四列，我添加了属性flagNum，名字相同的行flagNum一样，我这边打印出来的是 0-2行是0  3到5行是3  6到9行是6以此类推，可以发现其规律就是第一个开头的行，当你点击第一个编辑按钮的时候，传的index就是0，所以根据flagNum匹配0-2行可以编辑，下面的是一样的逻辑

element代码;

vue代码：

//判断可编辑作用域 用到的数据spanArr4Edit getSpanArr4Edit(data) { let ctx = this; var flagNum = 0; for (var i = 0; i < data.length; i++) { //首先不能编辑 ctx.$set(data[i], "editing", false); if (i === 0) { ctx.spanArr4Edit.push(flagNum); } else { // 判断当前元素与上一个元素是否相同 if (data[i].name === data[i - 1].name) { ctx.spanArr4Edit.push(flagNum); //还是同一个记录 } else { ctx.spanArr4Edit.push(i); flagNum = i; } } //与编辑相对应 ctx.$set(data[i], "flagNum", flagNum); } //最终赋值 ctx.tableData3 = data; console.log(ctx.spanArr4Edit, "this.spanArr4Edit"); }, handleEdit(index, row) { let ctx = this; this.setEditFlag(index, 1); console.log(index); }, /编辑输入框显示与隐藏0 隐藏 1显示 setEditFlag: function(index, flag) { let ctx = this; let datalength = ctx.tableData3.length; let flagNum = ctx.spanArr4Edit[index]; for (let i = 0; i < datalength; i++) { if (flag == 1) { if (flagNum === ctx.tableData3[i].flagNum) { //循环遍历改变可编辑的标记 this.$set(ctx.tableData3[i], "editing", true); } } else { //循环遍历改变可编辑的标记 this.$set(ctx.tableData3[i], "editing", false); } } }

3：第一列的数据是根据第三列相加得来的

可以用监听器深度监听后台传过来的数据

代码：

 watch: { tableData3: { handler(newValue, oldValue) { let ctx = this; let length = oldValue.length; var num = 0; if (length > 0) { for (let i = 0; i < length; i++) { //取出编辑后的对象数据 num = Number(num) + Number(ctx.tableData3[i].value1); } if (num != 0) { //赋值对象数据 ctx.tableData3[0].all = num; } else { ctx.tableData3[0].all = ""; } } }, deep: true //深度监听对象里面的属性 } },

4：弹出个输入框

此逻辑比较简单，就是弹出个输入框，点击确认把值带到这个页面进行填写

直接上代码：

 //快捷填写保存 addSubmit: function() { let ctx = this; //赋值数据,取出哪一行需要进行赋值 let idx = this.quickFlag; let datalength = ctx.tableData3.length; //每次快捷填写某一个区域，所以此变量在此定义 var initFlag = 0; for (let i = 0; i < datalength; i++) { if (idx === ctx.tableData3[i].flagNum) { if (initFlag == 0) { //value1 只赋值一次就行 this.$set(ctx.tableData3[i], "value1", this.addform.w); } initFlag++; this.$set(ctx.tableData3[i], "value2", this.addform.q); } } this.dialogQuick = false; ctx.$message.success("操作成功"); console.log(this.addform, "this.addform"); },

-----------------------------------分割线------------------------------------------------

完整代码