vue - elementUI 將table表格動態合併

如：下圖

 

template部分

      <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="one" label="一級菜單" width="180">
              <template slot-scope="scope">
                <input type="checkbox" />
                <span style="margin-left: 10px">{{ scope.row.one }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="two" label="二級菜單" width="380">
              <template slot-scope="scope">
                <input type="checkbox" v-if="scope.row.two !== ''" />
                <span style="margin-left: 10px">{{ scope.row.two }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="caozuo" label="操作">
              <template slot-scope="scope">
                <input type="checkbox" v-if="scope.row.caozuo.uper !== ''" />
                <span style="margin-left: 10px;margin-right:18px">{{ scope.row.caozuo.uper }}</span>
                <input type="checkbox" v-if="scope.row.caozuo.edit !== ''" />
                <span style="margin-left: 10px;margin-right:18px">{{ scope.row.caozuo.edit }}</span>
                <input type="checkbox" v-if="scope.row.caozuo.del !== ''" />
                <span style="margin-left: 10px;margin-right:18px">{{ scope.row.caozuo.del }}</span>
                <input type="checkbox" v-if="scope.row.caozuo.sh !== ''" />
                <span style="margin-left: 10px;margin-right:18px">{{ scope.row.caozuo.sh }}</span>
              </template>
            </el-table-column>
          </el-table>

 

2.數據data 

tableData: [
        {
          one: '首頁',
          two: '',
          caozuo: {
            uper: '',
            edit: '',
            del: '',
            sh: ''
          }
        },
        {
          one: '運營管理',
          two: '運行商管理',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '運營管理',
          two: '充電站管理',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '運營管理',
          two: '充電樁管理',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '運營管理',
          two: '充電樁遠程升級',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '運營管理',
          two: '充電樁價格維護',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '訂單管理',
          two: '充電訂單記錄',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '訂單管理',
          two: '充電訂單評價管理',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '訂單管理',
          two: '充值訂單記錄',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '訂單管理',
          two: '退款訂單記錄',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '訂單管理',
          two: '退款訂單記錄',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '客戶管理',
          two: '客戶信息',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '客戶管理',
          two: '套餐管理',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        },
        {
          one: '系統管理',
          two: '角色管理',
          caozuo: {
            uper: '新增',
            edit: '編輯',
            del: '刪除',
            sh: '審覈'
          }
        }
      ]

3.js部分 - 注意這個方法寫在methods裏面

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 合併的是第幾列
        switch (rowIndex) {
          case 0:   // 第一行
            return {
              rowspan: 1,
              colspan: 1
            };
          case 1:  // 第二行
            return {
              rowspan: 5, // 合併五行
              colspan: 1  // 第一列
            };
          case 6:
            return {
              rowspan: 4,
              colspan: 1
            };
          case 10:
            return {
              rowspan: 2,
              colspan: 1
            };
          case 12:
            return {
              rowspan: 2,
              colspan: 1
            };
          default:
            return {
              rowspan: 0,
              colspan: 0
            };
        }
      }
    }

 

 

4.當數據後臺返回爲動態數據

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 合併的是第幾列
        if (row.rowSpan === '0') {
          return {
            rowspan: row.num,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },

將數據，自己在組裝過，每條數據裏面加入是否合併的標識

每個合併時候的第一個數據，有一個標識，數據合併的num，可以組裝的時候計算好