vue中如何使用elementUI表格动态行合并_vue.js_

export default { data() { return { tableData: [], spanArr: [], } }, mounted() { this.rowspan(); }, methods: { rowspan() { // 每次调用清空数据 this.spanArr = [] this.position = 0 this.tableData.forEach((item, index) => { if (index === 0) { this.spanArr.push(1) this.position = 0 } else { // inquiryCode 为需要合并查询的项 if (this.tableData[index].inquiryCode === this.tableData[index - 1].inquiryCode) { this.spanArr[this.position] += 1 this.spanArr.push(0) } else { this.spanArr.push(1) this.position = index } } }) }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 || columnIndex === 13) { const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } }, } }

removeData(id) { //提示框，判断用户是否操作失误 this.$confirm("此操作将永久删除此学生, 是否继续?", "警告", { confirmButtonText: "继续", cancelButtonText: "取消", type: "warning" }) .then(() => { const data = { id }; //这里<=>data = {id:id} axios .post("URL", data) .then(response => { this.fetchdata(); //删除数据后重新获取数据 }) .catch(() => { this.$message({ type:"warning", message:"请求失败，请检查网络设置" }) }); }) .catch(() => { this.$message({ type: "info", message: "已取消删除" }); }); }