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，可以组装的时候计算好

 

对于这个案例，补充一下多选框，多选框其实在这是有两个功能，一个是一级和二级联动，一个是将选中的数据传递给后台

先说一下自己的思路，是将一级和二级存在一个联动关系，可以根据二级去判断一级是否选中或者未选中，这里其实没有做一级选中，二级全部选中，一级取消二级全部取消。只做了二级对一级的影响，其实做也做，只是当时做这个的时候场景对二级更看中。

 <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="mainLabel" label="一级菜单" width="180">
              <template slot-scope="scope">
                <input type="checkbox" :value="scope.row.mainId" v-model="scope.row.parentSelected" :disabled ="scope.row.ParentDisable"/>
                <span style="margin-left: 10px">{{ scope.row.mainLabel }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="label" label="二级菜单" width="380">
              <template slot-scope="scope">
                <input
                  type="checkbox"
                  :value="scope.row.id"
                  v-model="scope.row.selected"
                  @change="changeSelect(scope.row,scope.$index)"
                />
                <span style="margin-left: 10px">{{ scope.row.label}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="caozuo" label="操作">
              <template slot-scope="scope">
                <span v-for="(item,index) in scope.row.caozuo" :key="index">
                  <input
                    type="checkbox"
                    v-if="item.name !== ''"
                    v-model="item.itemCheck"
                    @change="fliterCheck( scope.row.caozuo,index)"
                  />
                  <span style="margin-left: 10px;margin-right:18px">{{ item.name }}</span>
                </span>
              </template>
            </el-table-column>
          </el-table>

 

下面是二级操作时候，改变一级的状态

确定的时候，从数据中筛选出选中的数据就行了，其实这代码写的不是很好，因为太多遍历了，但是当时时间紧凑，也没有来的急修改，然后然后然后就被遗忘了

总结一下，记得当时做这个也很头疼，这个功能设涉及了动态表单的合并，多选框的联动在里面，回显编辑，新增等等。其实最重要的是一个数据结构，就是table的每一行的数据结构是什么样子，这个决定了很多逻辑,，这个是案例的一个根据后端返回的数据重新拼凑的一个数据结构

其实vue，react这些用数据驱动视图的框架，在做前端的时候，很多时候都是一个数据结构的问题，去拼凑想要的数据结构完成功能