当前位置：首页 > news >正文

elementUI根据列表id进行列合并@莫成尘

news 来源：原创 2024/9/20 1:45:39

本文章提供了elementUI根据列表id进行列合并的demo，效果如图（可直接复制代码粘贴）

表格合并

<template><div id="app"><el-table border :data="tableList" style="width: 100%" :span-method="objectSpanMethod"><el-table-columntype="selection"width="55"></el-table-column><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="type" label="后缀"></el-table-column><el-table-column prop="about" label="地址"></el-table-column><el-table-column prop="dec" label="第一联想"></el-table-column></el-table></div>
</template><script>export default {name: 'App',components: {},data() {return {tableList: [{ id: 10010, name: '小日', type: '子', dec: '小男孩来过这个地方', about: '广岛' },{ id: 10010, name: '小日', type: '子', dec: '胖子来过这个地方', about: '长崎' },{ id: 10010, name: '小日', type: '子', dec: '李梅在这里抽过yan', about: '东京' },{ id: 10010, name: '小日', type: '子', dec: '这是一个地震多发的地方', about: '大板' },{ id: 21121, name: '印度', type: '斯坦', dec: '干净又卫生的超级大国', about: '德里' },{ id: 21121, name: '印度', type: '斯坦', dec: '新德里是首都', about: '新德里' },{ id: 21121, name: '印度', type: '斯坦', dec: '这是提前选好的下一个首都', about: '新新德里' },{ id: 21121, name: '印度', type: '斯坦', dec: '没办法的话这是下下个首都', about: '新新新德里' },]}},methods:{//表格合并objectSpanMethod({ row, column, rowIndex, columnIndex }) {console.log(row,column)if ( //if条件判断的是合并那一竖列columnIndex == 0 ||columnIndex == 1 ||columnIndex == 2 ||columnIndex == 3) {const _row = this.flitterData2(this.tableList).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},flitterData2(arr) {let spanOneArr = [];let concatOne = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);} else {//name 修改if (item.id === arr[index - 1].id) {//pid就是判断相同的字段//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);concatOne = index;}}});return {one: spanOneArr,};},}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>