<template> <div> <el-button type="primary" icon="el-icon-plus" @click.native.prevent="addMaintain(-1)">新增</el-button> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%;"> <el-table-column label="序号" width="80px" align='center'> <template slot-scope="scope"> <span>{{ scope.$index +1 }}</span> </template> </el-table-column> <el-table-column prop="oneID" label="oneID" align='center'></el-table-column> <el-table-column prop="twoID" label="twoID" align='center'></el-table-column> <el-table-column prop="name" label="name" align='center'></el-table-column> <el-table-column prop="type" label="协办人" align='center'></el-table-column> <el-table-column fixed="right" label="操作" align='center' width="220"> <template slot-scope="scope"> <el-button type="text" v-if="oneList.some(e => {return e.index + e.length === scope.$index + 1})" @click.native.prevent="addLargeRecords(scope.row)" size="small">新增第二层大类</el-button> <el-button type="text" @click.native.prevent="addRecords(scope.row)" size="small">新增</el-button> <el-button type="text" @click.native.prevent="delRecords(scope.$index, tableData, scope.row)" size="small">删除</el-button> <el-button type="text" v-if="twoList.some(e => {return e.index + e.length === scope.$index + 1})" @click.native.prevent="delTwoRecords(scope.$index, tableData, scope.row)" size="small">删除第二大类</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [{ oneID: 1, twoID: 1, name: '王小虎' }, { oneID: 1, twoID: 1, name: '王小虎' }, { oneID: 1, twoID: 2, name: '王小虎' }, { oneID: 1, twoID: 2, name: '王小虎' }, { oneID: 2, twoID: 1, name: '王小虎' }, { oneID: 2, twoID: 2, name: '王小虎' }, { oneID: 3, twoID: 1, name: '王小虎' }, { oneID: 4, twoID: 1, name: '王小虎' }] } }, computed: { oneList(){ let iList = []; this.tableData.forEach((row, rowIndex) => { let eIndex = iList.findIndex(e => { return e.oneID == row.oneID}); if(eIndex !== -1){ iList[eIndex].length += 1; } else { iList.push({ oneID: row.oneID, length: 1, index: rowIndex }) } }) return iList }, twoList(){ let tList = []; this.tableData.forEach((row, rowIndex) => { let eIndex = tList.findIndex(e => { return e.twoID == `${row.oneID}_${row.twoID}`}); if(eIndex !== -1){ tList[eIndex].length += 1; } else { tList.push({ twoID: `${row.oneID}_${row.twoID}`, length: 1, index: rowIndex }) } }) return tList } }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 1) { // console.log('oneList',row, column, rowIndex, columnIndex,this.oneList) let iIndex = this.oneList.findIndex(e => { return e.index == rowIndex}); if (iIndex !== -1) { return [this.oneList[iIndex].length, 1]; } else { return [0, 0]; } } if (columnIndex === 2) { // console.log('oneList',row, column, rowIndex, columnIndex,this.oneList) let iIndex = this.twoList.findIndex(e => { return e.index == rowIndex}); if (iIndex !== -1) { return [this.twoList[iIndex].length, 1]; } else { return [0, 0]; } } }, // 删除第二大类 delTwoRecords(index, rows, row){ let rIndex = this.twoList.findIndex(e => { return e.twoID == `${row.oneID}_${row.twoID}`}); rows.splice(this.twoList[rIndex].index, this.twoList[rIndex].length); }, delRecords(index, rows, row){ // rows.splice(index, 1); // return // 最后一条数据不能删除,只能清空子级数据 let rIndex = this.twoList.findIndex(e => { return e.twoID == `${row.oneID}_${row.twoID}`}); if(this.twoList[rIndex].length !== 1){ rows.splice(index, 1); } else { rows.splice(index, 1, { oneID: row.oneID, twoID: row.twoID, name: '' }); } }, addMaintain(){ if(this.tableData.length){ this.tableData.push({ oneID: this.oneList[this.oneList.length - 1].oneID + 1, twoID: 1, name: `外层新增` }) } else { this.tableData.push({ oneID: 1, twoID: 1, name: `外层新增` }) } }, addLargeRecords(row){ let rIndex = this.oneList.findIndex(e => { return e.oneID == row.oneID}); if(rIndex > -1){ let num = this.oneList[rIndex].index + this.oneList[rIndex].length this.tableData.splice(num, 0, { oneID: row.oneID, twoID: row.twoID + 1, name: `新增大类 -- ${num}` }) } }, addRecords(row){ let rIndex = this.twoList.findIndex(e => { return e.twoID == `${row.oneID}_${row.twoID}`}); if(rIndex > -1){ let num = this.twoList[rIndex].index + this.twoList[rIndex].length this.tableData.splice(num, 0, { oneID: row.oneID, twoID: row.twoID, name: `新增 -- ${num}` }) } } } } </script>
vue+element-ui表格合并新增、删除行
猜你喜欢
转载自www.cnblogs.com/lijh03/p/12531971.html
今日推荐
周排行