element-ui表格合併span-method

先看一下合併後的樣式,表格第二行,二三四列合併

 

官網給咱們提供了span-method的方法能夠進行表格合併,有4個參數返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,裏面是當前行和列的值,也就是tableData裏的值,rowIndex,columnIndex是當前行和列的序號

<el-table

:data="tableData6"

:span-method="arraySpanMethod"

border

style="width: 100%">

<el-table-column

prop="id"

label="ID"

width="180">

</el-table-column>

<el-table-column

prop="name"

label="姓名">

</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-column

prop="amount4"

sortable

label="數值 4">

</el-table-column>

</el-table>

<script>
  export default {
    data() {
      return {

　　　　　　tableData6: [{

　　　　　　　　id: '12987122',

　　　　　　　　name: '王小虎',

　　　　　　　　amount1: '11',

　　　　　　　　amount2: '3.2',

　　　　　　　　amount3: 10,

　　　　　　　　amount4: 88

　　　　　　}, {

　　　　　　　　id: '12987123',

　　　　　　　　name: '王小虎',

　　　　　　　　amount1: '11',

　　　　　　　　amount2: '3.2',

　　　　　　　　amount3: 12,

　　　　　　　　amount4: 88

　　　　　　}, {

　　　　　　　　id: '12987124',

　　　　　　　　name: '王小虎',

　　　　　　　　amount1: '11',

　　　　　　　　amount2: '3.2',

　　　　　　　　amount3: 12,

　　　　　　　　amount4: 88

　　　　　　}, {

　　　　　　　　id: '12987125',

　　　　　　　　name: '王小虎',

　　　　　　　　amount1: '11',

　　　　　　　　amount2: '3.2',

　　　　　　　　amount3: 12,

　　　　　　　　amount4: 88

　　　　　　}, {

　　　　　　　　id: '12987126',

　　　　　　　　name: '王小虎',

　　　　　　　　amount1: '539',

　　　　　　　　amount2: '3.2',

　　　　　　　　amount3: 12,

　　　　　　　　amount4: 88

　　　　　　}]

      };
    },
    methods: {
　　　　

/**
     * 表格合併
     * @param {*} param0
     * row 表格每一行的數據
     * column 表格每一列的數據
     * rowIndex 表格的行索引,不包括表頭,從0開始
     * columnIndex 表格的列索引,從0開始
     */
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex)
      // 打印出的數據就是表格當前行的數據,當前列的數據,索引
      if (rowIndex === 1) {
        // 合併第二行
        if (columnIndex === 1) {
          // 從第二列開始
          return [1, 3]
          // 這裏返回的是行和列的合併數量,能夠返回一個數組,也能夠返回一個對象,效果同樣
          // 這裏rowspan爲1是行有一行合併,colspan爲3是列有3列合併,你要合併幾行幾列就寫上相應的數字
          // return {
          //    rowspan: 1,
          //    colspan: 3
          //  }
          // 這裏要寫一個else的判斷,否則被合併列的原始數據會填充到合併以後的表格裏
          // 這個判斷是把合併的第3列,第4列的值省略,在合併的表格右邊直接填原先第5列的值,合併了幾列,就省略幾列的值
        } else if (columnIndex === 2 || columnIndex === 3) {
          return [0, 0]
        }
      }
    }

</script>

 再演示一下其餘合併效果,第二行和第三行都有合併

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex)
      // 打印出的數據就是表格當前行的數據,當前列的數據,索引
      if (rowIndex === 1 || rowIndex === 2) { // 在這裏多加一個行的判斷就行  // 合併第二行
        if (columnIndex === 1) {
          // 從第二列開始
          return [1, 3]
          // 這裏返回的是行和列的合併數量,能夠返回一個數組,也能夠返回一個對象,效果同樣
          // 這裏rowspan爲1是行有一行合併,colspan爲3是列有3列合併,你要合併幾行幾列就寫上相應的數字
          // return {
          //    rowspan: 1,
          //    colspan: 3
          //  }
          // 這裏要寫一個else的判斷,否則被合併列的原始數據會填充到合併以後的表格裏
          // 這個判斷是把合併的第3列,第4列的值省略,在合併的表格右邊直接填原先第5列的值,合併了幾列,就省略幾列的值
        } else if (columnIndex === 2 || columnIndex === 3) {
          return [0, 0]
        }
      }
    }

 

合併多行的狀況

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 1) {
        // 合併第二行
        if (columnIndex === 1) {
          // 從第二列開始
          return [2, 3]
          // 這裏返回的是行和列的合併數量,能夠返回一個數組,也能夠返回一個對象,效果同樣
          // 這裏rowspan爲2是行有兩行合併,colspan爲3是列有3列合併,你要合併幾行幾列就寫上相應的數字

          // 這個判斷是把第一行的第3列,第4列的值省略,在合併的表格右邊直接填原先第5列的值,合併了幾列,就省略幾列的值
        } else if (columnIndex === 2 || columnIndex === 3) {
          return [0, 0]
        }
      } else if (rowIndex === 2 && (columnIndex === 1 || columnIndex === 2 || columnIndex === 3)) {
        // 第二行的第2個數,第3個數,第4個數都要省略
        return [0, 0]
      }
    }

 

PS: 這裏寫的方法是基於數據肯定的狀況,若是數據是由後臺返回的狀況,能夠看一下我整理的另外一篇關於表格合併方法的補充,  http://www.javashuo.com/article/p-racdszdy-ec.html