element用法总结

表格合并单元格

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

如下:合并列

html


      
      
      
      
      
      
      
      

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
                    };
                } 
      }
    }
  };

element用法总结_第1张图片

你可能感兴趣的:(element,element,合并列,合并单元格,table合并)