element用法總結

表格合併單元格

通過給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
                    };
                } 
      }
    }
  };