element-ui实现多级树形结构+复选框表格

最新推荐文章于 2024-08-21 14:48:47 发布
最新推荐文章于 2024-08-21 14:48:47 发布
阅读量6k 收藏 37
点赞数 5
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xjf106/article/details/107806797
版权

效果如下图：

在这里插入图片描述

完整代码如下：

<template>
  <div class="role-details inside-base">
    <div class="inside-base-main clearfix">
      <!-- 中间内容 -->
      <div class="inside-base-cont">
        <div class="role-cont clearfix">
          <span>权限：</span>
          <div>
            <el-checkbox class="check-page-all" v-model="checkPageAll" @change="checkPageAllEv($event)"></el-checkbox>
            <!--  -->
            <el-table
              ref="table"
              :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
              :indent="10"
              :select-on-indeterminate="true"
              :default-expand-all="true"
              :tree-props="{children: 'childList', hasChildren: 'hasChildren'}">
              <el-table-column
                type="selection"
                width="55"
              >
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.pageCheck" @change="pageCheckEv(scope)"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column
                prop="page"
                label="页面"
              >
              </el-table-column>
              <el-table-column
                label="功能"
              >
                <template slot-scope="scope">
                  <el-checkbox label="新增" v-model="scope.row.fnCheck.add" @change="fnCheckEv(scope, 'add')" v-if="scope.row.fnList.includes('新增')"></el-checkbox>
                  <el-checkbox label="删除" v-model="scope.row.fnCheck.del" @change="fnCheckEv(scope, 'del')" v-if="scope.row.fnList.includes('删除')"></el-checkbox>
                  <el-checkbox label="修改" v-model="scope.row.fnCheck.mod" @change="fnCheckEv(scope, 'mod')" v-if="scope.row.fnList.includes('修改')"></el-checkbox>
                  <el-checkbox label="查看" v-model="scope.row.fnCheck.check" @change="fnCheckEv(scope, 'check')" v-if="scope.row.fnList.includes('查看')"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                label="数据权限"
              >
                <template slot-scope="scope">
                  <el-checkbox label="全部" v-model="scope.row.dataCheck.all" @change="dataCheckEv(scope, 'all')" v-if="scope.row.dataList.includes('全部')"></el-checkbox>
                  <el-checkbox label="自己录入" v-model="scope.row.dataCheck.self" @change="dataCheckEv(scope, 'self')" v-if="scope.row.dataList.includes('自己录入')"></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
            <!--  -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RoleDetails',
  data () {
    return {
      msg: '',
      checkPageAll: false,
      tableData: [
        {
          id: 1, // id
          page: 'xxx页面', // 页面分类
          pageCheck: false, // 是否可查看页面
          fnList: ['新增', '删除', '修改'], // 功能权限有哪些
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false
          },
          dataList: ['全部', '自己录入'], // 数据权限
          dataCheck: {
            all: false,
            self: false
          }
        },
        {
          id: 2,
          page: 'xxx页面',
          pageCheck: false,
          fnList: ['新增', '删除', '修改', '查看'],
          fnCheck: {
            add: false,
            del: false,
            mod: false,
            check: false
          },
          dataList: ['全部', '自己录入'], // 数据权限
          dataCheck: {
            all: false,
            self: false
          },
          childList: [
            {
              p_id: 2,
              id: 31,
              page: 'xxx页面',
              pageCheck: false,
              fnList: ['新增', '删除', '修改', '查看'],
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false
              },
              dataList: ['全部', '自己录入'], // 数据权限
              dataCheck: {
                all: false,
                self: false
              }
            },
            {
              p_id: 2,
              id: 32,
              page: 'xxx页面',
              pageCheck: false,
              fnList: ['新增', '删除', '修改', '查看'],
              fnCheck: {
                add: false,
                del: false,
                mod: false,
                check: false
              },
              dataList: ['全部', '自己录入'], // 数据权限
              dataCheck: {
                all: false,
                self: false
              },
              childList: [
                {
                  p_id: 32,
                  id: 33,
                  page: 'xxx页面',
                  pageCheck: false,
                  fnList: ['新增', '删除', '修改', '查看'],
                  fnCheck: {
                    add: false,
                    del: false,
                    mod: false,
                    check: false
                  },
                  dataList: ['全部', '自己录入'], // 数据权限
                  dataCheck: {
                    all: false,
                    self: false
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 查找父级函数
    getParent (data2, nodeId2) {
      var arrRes = []
      if (data2.length === 0) {
        if (nodeId2) {
          arrRes.push(data2)
        }
        return arrRes
      }
      let rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          let node = data[i]
          if (node.id === nodeId) {
            arrRes.push(node)
            rev(data2, node.p_id)
            break
          } else {
            if (node.childList) {
              rev(node.childList, nodeId)
            }
          }
        }
        return arrRes
      }
      arrRes = rev(data2, nodeId2)
      return arrRes
    },
    /**
     * 页面选择
     */
    // 总选框事件
    checkPageAllEv (item) {
      let checkAll = (data, checked) => {
        for (let x of data) {
          x.pageCheck = checked
          if (x.childList) {
            checkAll(x.childList, checked)
          }
        }
      }
      if (item === true) {
        checkAll(this.tableData, true)
      } else {
        checkAll(this.tableData, false)
      }
    },
    // 遍历json数据
    isCheckAllEv (data) {
      let isCheckAll = true
      let fn = data => {
        for (let x of data) {
          if (x.pageCheck === false) {
            isCheckAll = false
            return isCheckAll
          }
          if (x.childList) {
            fn(x.childList)
          }
        }
      }
      fn(data)
      console.log(isCheckAll)
      return isCheckAll
    },
    // 子选框事件
    pageCheckEv (scope) {
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleCheckAll(scope.row, scope.row.pageCheck)
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        if (!item.childList) {
          item.pageCheck = scope.row.pageCheck
        } else {
          var num = 0
          item.childList.forEach((item, i) => {
            if (item.pageCheck === true) {
              num += 1
            }
          })
          if (num === item.childList.length) {
            item.pageCheck = true
          } else {
            item.pageCheck = false
          }
        }
      })

      // 是否所有子项都已经勾选
      if (this.isCheckAllEv(this.tableData) === true) {
        this.checkPageAll = true
      } else {
        this.checkPageAll = false
      }
    },
    handleCheckAll (row, checked) {
      row.pageCheck = checked
      if (row.childList) {
        let that = this
        row.childList.forEach((element, i) => {
          that.handleCheckAll(row.childList[i], checked)
        })
      }
    },
    /**
     * 功能选择
     */
    // 子选框事件
    fnCheckEv (scope, type) {
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleFnAll(scope.row, scope.row.fnCheck[type], type)
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        if (!item.childList) {
          item.fnCheck[type] = scope.row.fnCheck[type]
        } else {
          var num = 0
          item.childList.forEach((item, i) => {
            if (item.fnCheck[type] === true) {
              num += 1
            }
          })
          if (num === item.childList.length) {
            item.fnCheck[type] = true
          } else {
            item.fnCheck[type] = false
          }
        }
      })
    },
    handleFnAll (row, fnCheck, type) {
      row.fnCheck[type] = fnCheck
      if (row.childList) {
        let that = this
        row.childList.forEach((element, i) => {
          that.handleFnAll(row.childList[i], fnCheck, type)
        })
      }
    },
    /**
     * 权限选择
     */
    // 权限：全部、自己
    // 子选框事件
    dataCheckEv (scope, type) {
      let temp = scope.row.dataCheck[type]
      for (let x in scope.row.dataCheck) {
        scope.row.dataCheck[x] = false
      }
      scope.row.dataCheck[type] = temp
      // 如果有子项，则子项的选框选择跟当前一致
      if (scope.row.childList) {
        this.handleDataAll(scope.row, scope.row.dataCheck[type], type)
      }
      // 查找父级选框
      this.getParent(this.tableData, scope.row.id).forEach((item, i) => {
        for (let x in item.dataCheck) {
          item.dataCheck[x] = false
        }
        if (!item.childList) {
          item.dataCheck[type] = temp
        } else {
          var num = 0
          item.childList.forEach((item, i) => {
            if (item.dataCheck[type] === true) {
              num += 1
            }
          })
          if (num === item.childList.length) {
            item.dataCheck[type] = true
          } else {
            item.dataCheck[type] = false
          }
        }
      })
    },
    handleDataAll (row, dataCheck, type) {
      for (let x in row.dataCheck) {
        row.dataCheck[x] = false
      }
      row.dataCheck[type] = dataCheck
      if (row.childList) {
        let that = this
        row.childList.forEach((element, i) => {
          that.handleDataAll(row.childList[i], dataCheck, type)
        })
      }
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.inside-base {
  position: relative;
}

.inside-base-main {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(231,232,238,1);
  border-radius: 4px;
  margin-bottom: 30px;
}

// 中间内容
.inside-base-cont {
  margin: 0 20px;
}

.role-cont {
  position: relative;
  font-size: 16px;
  color: #333333;
  line-height: 40px;
  > span {
    width: 90px;
    height: 40px;
    text-align: right;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
  }
  > div {
    position: relative;
    width: 90%;
    float: left;
    margin-bottom: 20px;
    >>> .el-input__inner {
      width: 320px;
    }
  }
}
.check-page-all {
  position: absolute;
  top: 13px;
  left: 11px;
  z-index: 99;
}

/* element-ui css */
.inside-base {
  >>> .el-input__inner {
    font-size: 16px;
    color: #333333;
  }
}
</style>

tips：代码写的粗糙请见谅，有需要的可以参考一下

jfengz
关注
专栏目录
详解vue-cli+element-ui树形表格(多级表格折腾小计)
10-17
主要介绍了vue-cli + element-ui 树形表格（多级表格折腾小计），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui 可复选树型表格
鱼猫的博客
10-23 1631
效果 思路 自定义模板 当点击某个行复选框时，其所有后代复选框都要同步状态，且其直系父辈状态需要根据所点击复选框的状态来修正 点击全选复选框时，批量同步所有行内复选框状态 代码 非封装组件，按需自行改写 确保引入element-ui 的情况下直接新增如下代码的vue组件即可，部分数据检索和批处理存在优化空间。 <template> <div> <aside>树型表格复选框</aside> <el-table re
Element-ui table进阶使用
最新发布
hoaxxcj的博客
08-21 1206
合并单元格就用自带的span-method，比如下图中红框部分单元格，先通过行列index定位，然后return一个数组或者对象，里面前者值为行，后者值为列，比如[1,3]意思就是1行放3列，{rowspan:2,colspan:1}意思就是2行放1列，两种写法都行。开发过程中遇到了一些问题：如何让table强制刷新。Table示例中数据格式如下，每个对象对应每一行，对象里的每个参数对应行中每列单元格，所以我们可以先拼接每一行的对象，如下图代码所示，最后进行单元格合并。然后设置对应的css样式即可。
vue--vue+ElementUI实现动态树+数据表格+分页
鑫709的博客
05-11 2279
前提在上一篇博客之后，继续来写
vue+elementui实现多层树形菜单
10-16
一个完整的树形菜单demo，下载即可运行，包含node_module包，使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
使用element ui的el-tree多层级树形结构
weixin_47097867的博客
10-27 837
使用element ui的el-tree多层级树形结构
vue基于element-ui的三级CheckBox复选框功能的实现代码
10-17
在现代Web开发中，复选框...通过以上的Vue组件和数据结构，我们可以在Vue项目中实现基于element-ui的三级复选框功能，实现全选、反选和不确定三种状态。这对于处理具有多层嵌套逻辑的复选框需求是非常有帮助的。
elementui树形复选框_Element-ui表格树形控件结合复选框实践
weixin_39634132的博客
12-22 1368
Element-ui是现在国内用得比较多的ui框架，其table组件提供了多选以及树形数据的功能，但却没有提供将两者结合的功能，我们先来看下面的图片，本文将介绍以下的功能如何实现以及其中的一些踩坑点。在上面的Gif中，当我们点击高层级的checkbox时，低层级的checkbox也会一并被勾选。取消的时候则一起被取消。要实现这个功能，我们首先得关注待渲染的数据结构。tableData: [{id:...
element-ui 多级树形表格加多选的效果
weixin_47934613的博客
07-30 1244
实现多级表格加多选的效果 父级表格点击具有全选、全不选的功能，点击部分子级表格，父级表格实现半选中的状态 template页面展示部分： <template> <div id="app"> <el-table :data="renderDynamic" //绑定表格数据 ref="product" //ref绑定表格 border //设置表格边框 row-key="id" //行数
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
weixin_39750731的博客
12-20 586
一：在component文件夹下新建如下treeTable文件夹，里面有2个文件：eval.js:将数据转换成树形数据/*** @Author: jianglei* @Date: 2017-10-12 12:06:49*/"use strict";import Vue from "vue";export default function treeToArray(data,expandAll,par...
elementui中树形表格切换展开不同层级
蜗牛~~
08-19 2444
elementui中树形表格切换展开不同层级。
vue+element UI实现树形表格带复选框的示例代码
10-17
主要介绍了vue+element UI实现树形表格带复选框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
＜ 在element-ui中： 使用el-tree + el-table组件，联动请求用户数据表格组件 （基础版，后续可能更新） ＞
一个平平无奇的技术宅
12-13 3515
在 Vue + elementUi 开发中，实现通过树状组织机构，点击查询用户信息联动效果！ 组件较为简单，可以直接嵌入到需要使用的位置，具体操作还得看各位大佬如何使用！ 纯记录！话不多说，先上效果图！ 白嫖万岁！当然，如果有帮助，希望不要吝啬你的点赞呀！ 通过组合element-ui 中的 tree 和 table组件，实现联动效果，单选（有需要可以自己改成多选）用户信息，传出到父组件中，通过触发方法接收。
elementUI的树----树与表单结合
唯爱赞多的博客
03-03 1089
elementUI的树 树与表单结合
Vue怎么使用elementui的el-tree和表格结合起来
m0_46239267的博客
05-29 1848
Vue怎么使用elementui的el-tree和表格结合起来
vue element-ui 组织结构多选框组件,树形复选框.支持多选
qq_34462698的博客
02-09 6120
效果 vue代码 标签 <div class="app-container" @click="divClick"> <el-form> <el-form-item> <tree-select ref="treeSelect" :data="officeTreeList" :defaultProps="defaultProps"
element-ui树形表格实现多层级嵌套，原来这么简单！
热门推荐
summer_my_sunshine的博客
05-25 1万+
多层级效果图，点击自动收缩： 话不多说，附上代码，此次代码示例全部为静态数据； 1.表格数据如下图 <el-table :data="tableData1" style="width: 100%" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"> <el-table-column prop
“ElementUI实现动态树和动态表格的综合应用“
2201_75869073的博客
09-26 1066
本文介绍了如何使用ElementUI实现动态树和动态表格的综合应用。通过Tree组件和Table组件，我们可以方便地展示和交互树形数据和表格数据。同时，通过动态加载数据的方式，我们可以实现树节点和表格数据的动态更新，提升用户体验。在实际项目中，可以根据具体需求进行进一步的定制和扩展，以满足项目的需求。
el-tree 与table表格联动
xiaoming4965的博客
11-20 833
【代码】el-tree 与table表格联动。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值