< elementUi 表格 合并表格 -- 根据后端数据形成树状表格 >

elementUi Plus + Vue 3 树状表格(合并表格 + 多选)

在开发中,可能会使用到表格合并的情况,在原生表格中,有rowspan 和 cowspan属性来实现。但是在ElementUI中呢 ? 在elementUi中 提供了一个 “ span-method ” 的 属性值, 用于控制表格的合并。接下来,通过实例看看如何合理使用它!

elementUi 表格合并属性

<template>
  <div class="tagAdmin">
    <div class="btnNav">
      <el-button type="primary" size="mini" @click="submit">提交el-button>
    div>
    <el-form ref="ruleForm" :model="formData">
      <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%" height="400"
        row-class-name="bda-table"
        :header-cell-style="{ color: '#333', 'background': '#eee', padding: '5px 10px', 'font-size': '12px'}">
        <el-table-column prop="parentId" min-width="120" label="功能">
          <template #default="scope">
            <el-checkbox size="mini"
              :indeterminate="childSelection[scope.row[ scope.row.children.length !== 0 ? 'parentId' : 'cfunctionId']]"
              @change="checkChange(
                scope.row[ scope.row.children.length !== 0 ? 'parentId' : 'cfunctionId'],
                sourceData.find(item => {
                  return item.cfunctionId === scope.row[ scope.row.children.length !== 0 ? 'parentId' : 'cfunctionId'];
                }).children
              )" v-model="formData[scope.row[ scope.row.children.length !== 0 ? 'parentId' : 'cfunctionId']]">
              {{scope.row[ scope.row.children.length !== 0 ? 'parentName' : 'cfunctionName']}}
            el-checkbox>
          template>
        el-table-column>
        <el-table-column prop="two-level" min-width="120" label="二级功能">
          <template #default="scope">
            
            <el-checkbox v-if="scope.row.children.length !== 0" size="mini"
              :indeterminate="childSelection[scope.row.cfunctionId]" v-model="formData[scope.row.cfunctionId]" @change="checkChange(
                scope.row.cfunctionId,
                scope.row.children,
                scope.row
              )">
              {{scope.row.cfunctionName}}
            el-checkbox>
            <div v-else>
              <el-checkbox size="mini" v-for="item in scope.row.unOwnedList" :key="item.cfunctionId"
                v-model="formData[item.cfunctionId]" @change="checkChange(
                  item.cfunctionId,
                  null,
                  item
                )">
                {{item.cfunctionName}}
              el-checkbox>
            div>
          template>
        el-table-column>
        <el-table-column prop="three-level" min-width="300" label="三级功能">
          <template #default="scope">
            <el-checkbox size="mini" v-for="item in scope.row.children" :key="item.cfunctionId"
              v-model="formData[item.cfunctionId]" @change="checkChange(
                item.cfunctionId,
                null,
                item,
                scope.row.pId
              )">
              {{item.cfunctionName}}
            el-checkbox>
            
          template>
        el-table-column>
      el-table>
    el-form>
  div>
template>



<script>
  // import * as _ from 'lodash';
  import {
    ElConfigProvider
  } from 'element-plus'
  import {
    defineComponent,
    reactive,
    toRefs,
    watch
  } from 'vue'
  export default {
    name: "tagAdmin",
    props: {},
    components: {
      [ElConfigProvider.name]: ElConfigProvider
    },
    setup() {
      const data = reactive({
        tableData: [],
        sourceData: [
          {
            "cfunctionId": "10059",
            "cfunctionName": "首页菜单",
            "pCfunctionId": "0",
            "indexCode": "32",
            "indexLev": 0,
            "seq": 0,
            "pCfunctionName": null,
            "permissionStr": "url:bdatag/homepage\nurl:bdatag/tag/statistics\nurl:bdatag/anlyz/listAnlyzByIndexIdAngTagobjId\nmenu:taglib/homeOverview\nurl:bdatag/tag/job/listHistTagCalcDayTime",
            "groupId": null,
            "groupName": null,
            "componentId": null,
            "componentName": null,
            "permissionValue": null,
            "enable": false,
            "id": "10059",
            "pId": "0",
            "indexType": null
          },
          {
            "cfunctionId": "10001",
            "cfunctionName": "标签管理",
            "pCfunctionId": "0",
            "indexCode": "01",
            "indexLev": 0,
            "seq": 1,
            "pCfunctionName": null,
            "permissionStr": "url:bdatag/dbcolumn\r\nurl:bdatag/model\r\nmenu:tag\r\nurl:bdatag/tag\r\nurl:bdatag/tagobj\r\nurl:bdatag/dbtable\r\nurl:bdatag/dbenum\r\nurl:bdatag/region",
            "groupId": null,
            "groupName": null,
            "componentId": null,
            "componentName": null,
            "permissionValue": null,
            "enable": false,
            "children": [{
                "cfunctionId": "10008",
                "cfunctionName": "标签目录维护",
                "pCfunctionId": "10001",
                "indexCode": "01.01",
                "indexLev": 1,
                "seq": 0,
                "pCfunctionName": null,
                "permissionStr": "",
                "groupId": null,
                "groupName": null,
                "componentId": null,
                "componentName": null,
                "permissionValue": null,
                "enable": false,
                "children": [{
                    "cfunctionId": "10015",
                    "cfunctionName": "新建目录",
                    "pCfunctionId": "10008",
                    "indexCode": "01.01.01",
                    "indexLev": 2,
                    "seq": 0,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tagindex:create",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10015",
                    "pId": "10008",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10016",
                    "cfunctionName": "编辑目录",
                    "pCfunctionId": "10008",
                    "indexCode": "01.01.02",
                    "indexLev": 2,
                    "seq": 1,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tagindex:update",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10016",
                    "pId": "10008",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10017",
                    "cfunctionName": "删除目录",
                    "pCfunctionId": "10008",
                    "indexCode": "01.01.03",
                    "indexLev": 2,
                    "seq": 2,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tagindex:delete",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10017",
                    "pId": "10008",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10018",
                    "cfunctionName": "移动目录",
                    "pCfunctionId": "10008",
                    "indexCode": "01.01.04",
                    "indexLev": 2,
                    "seq": 3,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tagindex:move",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10018",
                    "pId": "10008",
                    "indexType": null
                  }
                ],
                "id": "10008",
                "pId": "10001",
                "indexType": null
              },
              {
                "cfunctionId": "10009",
                "cfunctionName": "标签维护",
                "pCfunctionId": "10001",
                "indexCode": "01.02",
                "indexLev": 1,
                "seq": 1,
                "pCfunctionName": null,
                "permissionStr": "url:workflow\nmenu:taglib/tag",
                "groupId": null,
                "groupName": null,
                "componentId": null,
                "componentName": null,
                "permissionValue": null,
                "enable": false,
                "children": [{
                    "cfunctionId": "10020",
                    "cfunctionName": "创建标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.02",
                    "indexLev": 2,
                    "seq": 0,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:create",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10020",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10023",
                    "cfunctionName": "编辑标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.05",
                    "indexLev": 2,
                    "seq": 1,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:update",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10023",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10025",
                    "cfunctionName": "删除标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.08",
                    "indexLev": 2,
                    "seq": 2,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:delete",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10025",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10024",
                    "cfunctionName": "移动标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.07",
                    "indexLev": 2,
                    "seq": 3,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:move",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10024",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10019",
                    "cfunctionName": "标签详细",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.01",
                    "indexLev": 2,
                    "seq": 4,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:details",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10019",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10026",
                    "cfunctionName": "执行更新",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.09",
                    "indexLev": 2,
                    "seq": 5,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:calc",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10026",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10027",
                    "cfunctionName": "发布标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.10",
                    "indexLev": 2,
                    "seq": 6,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:publish",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10027",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10028",
                    "cfunctionName": "评估标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.11",
                    "indexLev": 2,
                    "seq": 7,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:evaluate",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10028",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10029",
                    "cfunctionName": "优化标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.12",
                    "indexLev": 2,
                    "seq": 8,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:optimize",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10029",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10030",
                    "cfunctionName": "停用标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.13",
                    "indexLev": 2,
                    "seq": 9,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:deactivate",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10030",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10031",
                    "cfunctionName": "重新启动",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.14",
                    "indexLev": 2,
                    "seq": 10,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:republish",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10031",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10032",
                    "cfunctionName": "下线标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.15",
                    "indexLev": 2,
                    "seq": 11,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:offline",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10032",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10033",
                    "cfunctionName": "命中分析配置",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.16",
                    "indexLev": 2,
                    "seq": 12,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:hit\r\nurl:bdatag/anlyz/getDefaultDbtable\r\nurl:bdatag/anlyz/v2/execute",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10033",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10034",
                    "cfunctionName": "标签预览数据",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.17",
                    "indexLev": 2,
                    "seq": 13,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:preview",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10034",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10035",
                    "cfunctionName": "标签明细数据查询",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.18",
                    "indexLev": 2,
                    "seq": 14,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:datatab:show",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10035",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10036",
                    "cfunctionName": "标签数据导出",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.19",
                    "indexLev": 2,
                    "seq": 15,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:detail:exp",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10036",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10117",
                    "cfunctionName": "规则标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.20",
                    "indexLev": 2,
                    "seq": 16,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:rule",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10117",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10118",
                    "cfunctionName": "组合标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.21",
                    "indexLev": 2,
                    "seq": 17,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:combine",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10118",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10119",
                    "cfunctionName": "手工标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.22",
                    "indexLev": 2,
                    "seq": 18,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:manual",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10119",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10120",
                    "cfunctionName": "模型标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.23",
                    "indexLev": 2,
                    "seq": 19,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:model",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10120",
                    "pId": "10009",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10121",
                    "cfunctionName": "实时标签",
                    "pCfunctionId": "10009",
                    "indexCode": "01.02.24",
                    "indexLev": 2,
                    "seq": 20,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:realtime",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10121",
                    "pId": "10009",
                    "indexType": null
                  }
                ],
                "id": "10009",
                "pId": "10001",
                "indexType": null
              },
              {
                "cfunctionId": "10303",
                "cfunctionName": "我的标签",
                "pCfunctionId": "10001",
                "indexCode": "01.11",
                "indexLev": 1,
                "seq": 2,
                "pCfunctionName": null,
                "permissionStr": "menu:myTag",
                "groupId": null,
                "groupName": null,
                "componentId": null,
                "componentName": null,
                "permissionValue": null,
                "enable": false,
                "children": [{
                    "cfunctionId": "10304",
                    "cfunctionName": "创建的标签",
                    "pCfunctionId": "10303",
                    "indexCode": "01.11.01",
                    "indexLev": 2,
                    "seq": 0,
                    "pCfunctionName": null,
                    "permissionStr": "menu:taglib/tagSelfCreate",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10304",
                    "pId": "10303",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10305",
                    "cfunctionName": "收藏的标签",
                    "pCfunctionId": "10303",
                    "indexCode": "01.11.02",
                    "indexLev": 2,
                    "seq": 1,
                    "pCfunctionName": null,
                    "permissionStr": "menu:taglib/tagSelfCollect",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10305",
                    "pId": "10303",
                    "indexType": null
                  }
                ],
                "id": "10303",
                "pId": "10001",
                "indexType": null
              },
              {
                "cfunctionId": "10010",
                "cfunctionName": "标签集市",
                "pCfunctionId": "10001",
                "indexCode": "01.03",
                "indexLev": 1,
                "seq": 3,
                "pCfunctionName": null,
                "permissionStr": "menu:taglib/tagMarket/market",
                "groupId": null,
                "groupName": null,
                "componentId": null,
                "componentName": null,
                "permissionValue": null,
                "enable": false,
                "id": "10010",
                "pId": "10001",
                "indexType": null
              },
              {
                "cfunctionId": "10011",
                "cfunctionName": "标签更新",
                "pCfunctionId": "10001",
                "indexCode": "01.04",
                "indexLev": 1,
                "seq": 4,
                "pCfunctionName": null,
                "permissionStr": "menu:taglib/tagUpdate\nurl:bdatag/tagclash\nurl:bdatag/visual/listTagFilterFieldVos\nurl:bdatag/visual/listTagShowFieldVos\nurl:bdatag/portrait/listBizObjects\nurl:bdatag/job/log/list",
                "groupId": null,
                "groupName": null,
                "componentId": null,
                "componentName": null,
                "permissionValue": null,
                "enable": false,
                "id": "10011",
                "pId": "10001",
                "indexType": null
              },
              {
                "cfunctionId": "10012",
                "cfunctionName": "运营监测",
                "pCfunctionId": "10001",
                "indexCode": "01.05",
                "indexLev": 1,
                "seq": 5,
                "pCfunctionName": null,
                "permissionStr": "menu:taglib/tagAssessment",
                "groupId": null,
                "groupName": null,
                "componentId": null,
                "componentName": null,
                "permissionValue": null,
                "enable": false,
                "id": "10012",
                "pId": "10001",
                "indexType": null
              },
              {
                "cfunctionId": "10013",
                "cfunctionName": "需求提报",
                "pCfunctionId": "10001",
                "indexCode": "01.06",
                "indexLev": 1,
                "seq": 6,
                "pCfunctionName": null,
                "permissionStr": "menu:taglib/requirement\nurl:taglib/requirement\n",
                "groupId": null,
                "groupName": null,
                "componentId": null,
                "componentName": null,
                "permissionValue": null,
                "enable": false,
                "children": [{
                    "cfunctionId": "10038",
                    "cfunctionName": "提需求",
                    "pCfunctionId": "10013",
                    "indexCode": "01.06.02",
                    "indexLev": 2,
                    "seq": 0,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:apply",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10038",
                    "pId": "10013",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10039",
                    "cfunctionName": "删除需求",
                    "pCfunctionId": "10013",
                    "indexCode": "01.06.03",
                    "indexLev": 2,
                    "seq": 1,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:deleteApply",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10039",
                    "pId": "10013",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10041",
                    "cfunctionName": "关闭需求",
                    "pCfunctionId": "10013",
                    "indexCode": "01.06.05",
                    "indexLev": 2,
                    "seq": 2,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:closeApply",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10041",
                    "pId": "10013",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10042",
                    "cfunctionName": "导入需求",
                    "pCfunctionId": "10013",
                    "indexCode": "01.06.06",
                    "indexLev": 2,
                    "seq": 3,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:importApply\nurl:bdatag/excel",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10042",
                    "pId": "10013",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10044",
                    "cfunctionName": "导出需求",
                    "pCfunctionId": "10013",
                    "indexCode": "01.06.07",
                    "indexLev": 2,
                    "seq": 4,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tag:exportApply",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10044",
                    "pId": "10013",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10037",
                    "cfunctionName": "流程配置",
                    "pCfunctionId": "10013",
                    "indexCode": "01.06.01",
                    "indexLev": 2,
                    "seq": 5,
                    "pCfunctionName": null,
                    "permissionStr": "fun:tag:applyworkflow:config",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10037",
                    "pId": "10013",
                    "indexType": null
                  }
                ],
                "id": "10013",
                "pId": "10001",
                "indexType": null
              },
              {
                "cfunctionId": "10014",
                "cfunctionName": "主体配置",
                "pCfunctionId": "10001",
                "indexCode": "01.07",
                "indexLev": 1,
                "seq": 7,
                "pCfunctionName": null,
                "permissionStr": "menu:taglib/tagobj\nurl:workflow\nurl:bdatag/dblink\nurl:bdatag/excel/cancle\nurl:bdatag/excel/getTemplate",
                "groupId": null,
                "groupName": null,
                "componentId": null,
                "componentName": null,
                "permissionValue": null,
                "enable": false,
                "children": [{
                    "cfunctionId": "10047",
                    "cfunctionName": "新增标签主体",
                    "pCfunctionId": "10014",
                    "indexCode": "01.07.01",
                    "indexLev": 2,
                    "seq": 0,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tagobj:create",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10047",
                    "pId": "10014",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10048",
                    "cfunctionName": "编辑标签主体",
                    "pCfunctionId": "10014",
                    "indexCode": "01.07.02",
                    "indexLev": 2,
                    "seq": 1,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tagobj:update",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10048",
                    "pId": "10014",
                    "indexType": null
                  },
                  {
                    "cfunctionId": "10049",
                    "cfunctionName": "删除标签主体",
                    "pCfunctionId": "10014",
                    "indexCode": "01.07.03",
                    "indexLev": 2,
                    "seq": 2,
                    "pCfunctionName": null,
                    "permissionStr": "bdatag:fun:tagobj:delete",
                    "groupId": null,
                    "groupName": null,
                    "componentId": null,
                    "componentName": null,
                    "permissionValue": null,
                    "enable": false,
                    "id": "10049",
                    "pId": "10014",
                    "indexType": null
                  }
                ],
                "id": "10014",
                "pId": "10001",
                "indexType": null
              }
            ],
            "id": "10001",
            "pId": "0",
            "indexType": null
          },
        ],
        formData: {},
        treeData: [],
        childSelection: {}
      });

      // 处理数据方法
      let initData = (arr) => {
        // arr = JSON.parse(JSON.stringify(data.tableData));
        arr.forEach(item => {
          let unOwnedList = [];
          if (item.children) {
            item.children.forEach((j, index) => {
              let temp = JSON.parse(JSON.stringify(j));
              j.parentId = item.cfunctionId;
              j.parentName = item.cfunctionName;
              if (!j.children) {
                j.children = [];
                unOwnedList.push(temp);
              }
            })
          }
          // window.console.log(unOwnedList, item.children)
          if (item.children) {
            let childItem = item.children;

            if (unOwnedList.length !== 0) {
              unOwnedList.forEach(item_1 => {
                childItem.forEach((res, index) => {
                  // window.console.log(res.cfunctionName, item_1.cfunctionName)
                  if (res.cfunctionId === item_1.cfunctionId) {
                    // window.console.log(index, childItem[index])
                    childItem.splice(index, 1);
                  }
                });
              });
              childItem.push({
                // ...item,
                children: [],
                unOwnedList: unOwnedList,
                parentId: item.cfunctionId,
                parentName: item.cfunctionName,
                cfunctionId: item.cfunctionId,
                cfunctionName: item.cfunctionName,
              })
            }
            // window.console.log(childItem)
            data.tableData.push(...childItem);

          } else {
            data.tableData.push({
              ...item,
              children: []
            })
          }
        });
      };

      // 初始化数据(处理成适合的数据)
      // initData(JSON.parse(JSON.stringify(data.treeData)));
      data.treeData = JSON.parse(JSON.stringify(data.sourceData));
      initData(data.treeData);

      // 合并表格方法
      const arraySpanMethod = ({
        row,
        column,
        rowIndex,
        columnIndex
      }) => {
        if (columnIndex === 0) {
          const parent = data.treeData.find(i => i.cfunctionId === row.parentId)
          // window.console.log(parent)
          if (parent && row.cfunctionId === parent.children[0].cfunctionId) {
            return {
              rowspan: parent.children.length,
              colspan: 1
            }
          } else if (parent && row.cfunctionId !== parent.children[0].cfunctionId) {
            return {
              rowspan: 0,
              colspan: 0
            }
          } else {
            return {
              rowspan: 1,
              colspan: 3
            }
          }
        } else if (columnIndex === 1) {
          // window.console.log(row, column, rowIndex, columnIndex)
          if (row.children.length !== 0) {
            return {
              rowspan: 1,
              colspan: 1
            }
          } else {
            return {
              rowspan: 1,
              colspan: 2
            }
          }
        }
      };

      // 多选框选中效果
      const checkChange = (id, childList, row, superiorId) => {
        // window.console.log(id, data.formData[id], childList)
        // window.console.log(data.treeData.find(item => {
        //   return item.cfunctionId === id
        // }))
        data.childSelection[id] = false;
        if (row && row.pId !== '0') {
          data.childSelection[row.pId] = true;

          if (!!superiorId) {
            data.childSelection[superiorId] = true;
          }
        }

        if (!!childList) {
          childList.forEach(item => {
            data.formData[item.cfunctionId] = data.formData[id];
            if (!!item.children) {
              checkChange(item.cfunctionId, item.children);
            }
          })
        }
      };

      // 提交选中内容
      const submit = () => {
        window.console.log('选中内容', data.formData)
      };

      // 监测选项改变
      watch(data.formData, (v, ov) => {
        // window.console.log('选项改变了', v, ov)
      });

      // 将所需使用的内容进行输出
      return {
        ...toRefs(data),
        arraySpanMethod,
        checkChange,
        submit
      };
    }
  };
script>

<style lang="scss">
  .bda-table {
    .el-table__cell {
      padding: 5px 10px;

      .cell {
        height: auto;

        .el-checkbox__label {
          font-size: 10px;
        }
      }
    }
  }
style>

<style scoped lang="scss">
  .btnNav {
    padding: 5px 15px;
    text-align: right;
  }
style>
效果如图:

< elementUi 表格 合并表格 -- 根据后端数据形成树状表格 >_第1张图片
如有问题,欢迎私信沟通!

你可能感兴趣的:(elementUi,组件封装,vue.js,vue,elementui)