vue-element-ui table动态合并

最新推荐文章于 2024-09-11 08:59:31 发布

小河马游六花

最新推荐文章于 2024-09-11 08:59:31 发布

阅读量766

点赞数

文章标签： Element-UI 表格合并 span-method objectSpanMethod 数据格式化

本文链接：https://blog.csdn.net/weixin_41198447/article/details/121864153

版权

项目开发用的是element-ui，
table合并经常会被用到，
但table合并实在是令人头疼。（可能是我找不到正确的文档）
网上找到的教程基本上是设定一个全局的spanArr和pos去记录，可能创造者写的没什么问题，但后面的人抄来抄去，到读者手上的时候已经是非人类可以看懂的代码了，给开发带来了很多不必要的麻烦。
以下代码可直接运行，大家需要的话就复制去试一下，希望可以帮到您。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="amount1" sortable label="数值 1">
            </el-table-column>
            <el-table-column prop="amount2" sortable label="数值 2">
            </el-table-column>
            <el-table-column prop="amount3" sortable label="数值 3">
            </el-table-column>
        </el-table>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
 new Vue({
     el: '#app',
     data: function () {
         return {
             tableData: [{
                 id: '12987122',
                 name: '王小虎',
                 amount1: '234',
                 amount2: '3.2',
                 amount3: 10
             }, {
                 id: '12987123',
                 name: '王小虎',
                 amount1: '234',
                 amount2: '4.43',
                 amount3: 12
             }, {
                 id: '12987124',
                 name: '王小虎',
                 amount1: '324',
                 amount2: '1.9',
                 amount3: 9
             }, {
                 id: '12987125',
                 name: '王二虎',
                 amount1: '621',
                 amount2: '2.2',
                 amount3: 17
             }, {
                 id: '12987126',
                 name: '王二虎',
                 amount1: '621',
                 amount2: '4.1',
                 amount3: 15
             }]
         }
     },
     mounted() {
         this.tableData.forEach((item, index) => {
             if (index === this.tableData.length - 1) {
                 this.setTableRowAndCol(this.tableData, ['name', 'amount1'])
             }
         })
     },
     methods: {
         setTableRowAndCol(tableData, fieldArr) {
             let lastItem = {}
             fieldArr.forEach((field, index) => {
                 tableData.forEach(row => {
                     row.mergeCellName = fieldArr;
                     const rowSpan = `rowspan_${field}`;

                     if (fieldArr.slice(0, index + 1).every(e => lastItem[e] === row[e])) {
                         row[rowSpan] = 0;
                         lastItem[rowSpan] += 1
                     } else {
                         row[rowSpan] = 1;
                         lastItem = row
                     }
                 })
             })
         },
         objectSpanMethod({ row, column, rowIndex, columnIndex }) {
             if (row.mergeCellName.includes(column.property)) {
                 const rowspan = row[`rowspan_${column.property}`]
                 if (rowspan) {
                     return {
                         rowspan: rowspan,
                         colspan: 1
                     }
                 } else {
                     return {
                         rowspan: 0,
                         colspan: 0
                     }
                 }
             }
         }
     }
 })
</script>

</html>Ï