图文解析注释el-table中自定义合并单元格的方法 :span-method

原创

于 2024-05-24 11:40:21 发布

· 602 阅读

3 ·

版权

文章标签：

#javascript #html #html5 #hash table #elementui

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。这是官方文档的解释

让我们看看实际开发的效果图（代码在最下面）在这里插入图片描述

  <el-table
                class="table ux-dark-el-table"
                :header-cell-style="{ background: '#F2F2F2' }"
                :data="tableData"
                element-loading-spinner="el-icon-loading"
                :cell-class-name="setClass"
                :span-method="objectSpanMethod"
                >
                  <el-table-column width="150" label='维度' >
                    <template slot-scope="scope">
                        <div >{
   {
    scope.row.name }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label='明细' >
                    <template slot-scope="scope"<