＜ elementUi 表格 合并表格 -- 根据后端数据形成树状表格 ＞

最新推荐文章于 2024-05-21 14:19:13 发布
最新推荐文章于 2024-05-21 14:19:13 发布
阅读量2.2k 收藏 15
点赞数 8
分类专栏： elementUi 组件封装 文章标签： vue.js vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MrWen2395772383/article/details/123877501
版权

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 size="mini" v-model="formData[scope.row.cfunctionId]">
              {{scope.row.cfunctionName}}
            </el-checkbox> -->
            <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>
            <!-- <el-checkbox-group v-model="formData[scope.row.cfunctionId + '-children']">
              <el-checkbox  v-for="item in scope.row.children" :key="item.cfunctionId">
                {{item.cfunctionName}}
              </el-checkbox>
            </el-checkbox-group> -->
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<!-- <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.js"></script> -->

<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>
效果如图：

效果图
如有问题，欢迎私信沟通！

技术宅小温
关注
  • 8
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
前端根据后端数据展示表格 处理数据 动态合并单元格
hy2356891299的博客
05-23 1866
前端根据后端数据展示表格 处理数据 动态合并单元格
详解vue-cli+element-ui树形表格(多级表格折腾小计)
10-17
主要介绍了vue-cli + element-ui 树形表格（多级表格折腾小计），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element 表格合并 + 树形
qq_43086723的博客
08-15 1429
·Element 表格合并 + 树形
基于Vue + element制作扁平化树形结构渲染表格（动态行列合并，树结构算法应用）
m0_49083276的博客
09-15 2272
1）扁平转树和树形转扁平，element-ui的表格组件从数组索引0开始渲染一直到最后，如果后端没有按照顺序传数据会导致表格错乱，所以我们需要将数据二次处理（扁平转树再转扁平），达到整理数据的效果//扁平转树if (!} else {});} else {});},//树转扁平// 将当前节点添加到结果数组中// 递归遍历子节点// 从每个根节点开始遍历},//重构数据},
vue3 + element plus 树形控件整合input框 实现增删改查
weixin_59556362的博客
05-21 282
【代码】vue3 + element plus 树形控件整合input框 实现增删改查。
element ui表格合并-vue2
Timi_666的博客
02-24 325
elementui表格合并，关键的是处理数据，通过for循环遍历处理，对需要合并的列的值进行比较，达到合并效果，最后必须将值进行倒序处理否则无效 this.tableData.reverse()运用了官方的方法 :span-method="objectSpanMethod",写在methods方法里面。最后说明一下,方法是我的一个朋友刘总（小刘）帮助下，进一步修改完成的。希望对大家有帮助。
element-plus2.5.10版本el-table树形数据设置自定义展开收起图标与插槽图标-第一级才设置索引
个人博客
10-28 4599
el-table树形数据，设置自定义展开收起图标与插槽图标-第一级才设置索引
ElementUI 使用Table组件，绘制一个二维表格
weixin_53399156的博客
05-25 2520
elementUI 表格组件的灵活使用，建立二维表格
基于Javascript的treetable-lay树形表格设计源码
最新发布
05-23
treetable-lay是一个基于Javascript开发的树形表格，包含131个文件，其中包括75个GIF图片文件、24个JavaScript文件、9个JSON文件、7个CSS文件、5个HTML文件、3个PNG图片文件、1个Git忽略文件、1个LICENSE文件和1个...
优雅的将ElementUI表格变身成树形表格的方法步骤
10-17
普通的ElementUI表格是二维数据展示，而树形表格则需要处理嵌套的数据结构，通常包含父节点和子节点。在我们的示例中，我们使用一个一维数组，其中每个对象都有`id`（标识符）、`pid`（父标识符）和`children`（子...
el-table树形表格表单验证(列表生成序号)
10-15
`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。 ### 一、树形列表生成序号 生成树形列表...
elementUI表格树动态合并列问题处理
CuiCui_web的博客
09-10 2686
此篇为第一版，写法有问题，最终版请查看https://blog.csdn.net/CuiCui_web/article/details/103767614 首先看一下效果图，根据评估人来进行合并（有相同内容的列都可以通过这种方式进行合并列） <el-table :data="tableData" ref="tableDialog" ...
elementui表格el-table-树形数据-数据重构
JJ_Smilewang的博客
02-24 2172
经常会遇到各种分类列表的展示，并且类别还是多级的，这时就需要使用elmentui表格中的树形数据进行展示。
element-ui——table实现单元格合并及取消合并功能——基础积累
yehaocheng520的博客
01-19 4242
最近在做后台管理系统，遇到一个需求就是：单元格的合并，具体功能如下： 左侧是个expand的展开和折叠功能，展开行后，需要取消单元格的合并功能。 1.处理table表格的数据——将相邻且相同的单元格合并成数组 data(){ return{ serialArr: [], materialTypeArr: [], tagNumberArr: [], objectSpanFlag:true,//是否开始单元格的合并 expandedRow
Vue+Element-ui实现表格嵌套表格（表头不同）
wind的博客
03-21 2574
【代码】Vue+Element-ui实现表格嵌套表格（表头不同）
Element Plus中表格树型结构，像el-tree的属性check-strictly一样，实现遵循父子不互相关联
一个韩韩韩
12-29 784
借助el-table的@select回调事件，而不是借助@selection-change。因为selection-change在我们手动设置表格选中或者非选中时，会触发这个事件回调，不利于我们判断。而select当用户手动勾选数据行的 Checkbox 时才触发。第一步：先定义selectedIdList一个数组，用于存储我们选中的行目id。勾选一个字节的，父节点不是半选状态，勾选了父节点，子节点没有被选中。勾选父节点时，不影响字节点的选中状态。第二步：实现select的回调函数。
Vue+Element中Table树形懒加载，添加，修改，删除后数据动态更新
李特成的博客
02-24 3883
数据准备 结果呈现 添加最外层菜单 添加子菜单界面 直接上代码 index.vue <template> <div class="table-container"> <vab-query-form> <vab-query-form-left-panel :span="3"> <el-button icon="el-icon-plus" type="success..
element-plus中el-table实现树形数据懒加载展示
qq_58619728的博客
01-06 3114
element-plus中el-table实现树形数据懒加载展示
ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总
小猫爪子
08-16 4841
树形表格使用
<div class="container"> <div> <table id="tree" class="table table-hover"> <thead> <tr> <th>昆明鸿济堂大药房定制报表</th> </tr> </thead> <tbody> <!-- 根节点 --> <tr class="treegrid-0"> <td>菜单</td> </tr> </tbody> </table> </div> </div>在这个树状结构中，点击每个结点链接到repot.html?procedure=XXX
05-25
可以通过以下方式实现： 1. 在每个结点的 <td> 标签中添加一个链接，例如： ``` <td><a href="repot.html?procedure=XXX">节点名称</a></td> ``` 2. 在 JavaScript 中使用 jQuery 插件 treegrid 来实现树状结构，并使用以下代码为每个节点添加链接： ``` $('#tree').treegrid({ // 其他配置项 onClickRow: function(row) { window.location.href = 'repot.html?procedure=' + row.id; } }); ``` 其中， `row.id` 可以根据实际情况修改为对应节点的 ID 或其他标识符。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

技术宅小温

你小小的鼓励，是我搬砖的动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值