博客

表格合并单元格

通过给


table


传入


span-method


方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行


row


、当前列


column


、当前行号


rowIndex


、当前列号


columnIndex


四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表


rowspan


，第二个元素代表


colspan


。 也可以返回一个键名为


rowspan


和


colspan


的对象。

如下：合并列

html

<el-table
      :data="tableData"
      :span-method="mergeCol"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
        label="爱豆"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="number"
        label="编码">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
</el-table>

JS

data() {
      return {
        tableData: [{
            id: '000',
            name: '肖战',
            number: '234',
            age: 7
          }, {
            id: '001',
            name: '王一博',
            number: '165',
            age: 8
          }, {
            id: '002',
            name: '魏无羡',
            number: '324',
            age: 9
          }, {
            id: '003',
            name: '蓝忘机',
            number: '621',
            age: 10
          }, {
            id: '004',
            name: '李希侃',
            number: '539',
            age: 11
          }, {
            id: '005',
            name: '小栗旬',
            number: '539',
            age: 12
          }]

      };
},
methods: {
      mergeCol({ row, column, rowIndex, columnIndex }) {
        var len = this.tableData.length;
        if (rowIndex === 2 && columnIndex === 0) {
                    return {
                        rowspan: len,
                        colspan:1
                    };
                } else if (rowIndex >2 && columnIndex === 0) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                } 
      }
    }
  };