element-ui树型组件封装

已于 2022-08-10 08:38:34 修改
阅读量1k 收藏 2
点赞数
分类专栏： 封装 文章标签： javascript vue.js 前端
于 2022-08-05 09:55:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46199553/article/details/126171886
版权

前言：想吐槽一下，这个csdn弄了一个什么鸟功能，必须要写五行字，毛病多。
我们在进行前端开发的时候，需要对一些组件进行封装，他会为我们带来很多的好处，提高我们模块化的思想，同时也提高自己的技术。对于组件封装是在所难免的，有时思路很重要，这样能让我们更快的进行开发。哈哈哈
思路：首先创建两个组件，父组件向子组件传递参数，子组件发送请求，并将数据返回给父组件
然后就去实现

首先时父组件将数据传给子组件

<template>
  <div>
    <HelloWorld :data="data"
                 :defaultProps="defaultProps" multiple
                 :nodeKey="nodeKey" :checkedKeys="defaultCheckedKeys"
                 @popoverHide="popoverHide"></HelloWorld>
  </div>
</template>
 
<script>
import HelloWorld from "@/components/HelloWorld.vue"
var menus = [
  {
    'menuId': 1,
    'menuName': '系统管理',
    'childrenList': [
      {
        'menuId': 100,
        'menuName': '用户管理',
        'childrenList': [
          {
            'menuId': 1000,
            'menuName': '用户查询'
          },
          {
            'menuId': 1001,
            'menuName': '用户新增'
          },
          {
            'menuId': 1002,
            'menuName': '用户修改'
          },
          {
            'menuId': 1003,
            'menuName': '用户删除'
          }
        ]
      },
      {
        'menuId': 101,
        'menuName': '角色管理',
        'childrenList': [
          {
            'menuId': 1006,
            'menuName': '角色查询'
          },
          {
            'menuId': 1007,
            'menuName': '角色新增'
          },
          {
            'menuId': 1008,
            'menuName': '角色修改'
          },
          {
            'menuId': 1011,
            'menuName': '删除角色'
          }
        ]
      }
    ]
  }
];
export default {
  components: { HelloWorld },
  data () {
    return {
      data: menus,
      defaultProps: {
        children: 'childrenList',
        label: 'menuName'
      },
      nodeKey: 'menuId',
      defaultCheckedKeys: []
    };
  },
  created () {
    // 注意：初始化defaultCheckedKeys时，在created里面
    // 父组件先执行自己的created，然后子组件开始执行自己的created和mounted，最后父组件再执行自己的mounted。
    // 因为此页面加载，先执行该组件自己的created，然后执行TreeSelect组件的created和mounted，最后执行该组件的mounted
    this.defaultCheckedKeys = [1000];
  },
  mounted () {
    // 此处初始化defaultCheckedKeys，没效果
    this.defaultCheckedKeys = [1001];
  },
  methods: {
    popoverHide (checkedIds, checkedData) {
      console.log(checkedIds);
      console.log(checkedData);
    }
  }
};
</script>
 
<style scoped>
 
</style>

子组件接受父组件

<template>
  <div>
    <div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
    <el-popover placement="bottom-start" :width="width" trigger="manual"
                v-model="isShowSelect" @hide="popoverHide">
      <el-tree class="common-tree" :style="style" ref="tree" :data="data" :props="defaultProps"
               :show-checkbox="multiple"
               :node-key="nodeKey"
               :check-strictly="checkStrictly"
               default-expand-all
               :expand-on-click-node="false"
               :check-on-click-node="multiple"
               :highlight-current="true"
               @node-click="handleNodeClick"
               @check-change="handleCheckChange"></el-tree>
      <el-select :style="selectStyle" slot="reference" ref="select" :size="size"
                 v-model="selectedData"
                 :multiple="multiple"
                 :clearable="clearable"
                 :collapse-tags="collapseTags"
                 @click.native="isShowSelect = !isShowSelect"
                 @remove-tag="removeSelectedNodes"
                 @clear="removeSelectedNode"
                 @change="changeSelectedNodes"
                 class="tree-select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-popover>
  </div>
</template>
 
<script>
export default {
  name: 'tree-select',
  props: {
    // 树结构数据
    data: {
      type: Array,
      default () {
        return [];
      }
    },
    defaultProps: {
      type: Object,
      default () {
        return {};
      }
    },
    // 配置是否可多选
    multiple: {
      type: Boolean,
      default () {
        return true;
      }
    },
    // 配置是否可清空选择
    clearable: {
      type: Boolean,
      default () {
        return true;
      }
    },
    // 配置多选时是否将选中值按文字的形式展示
    collapseTags: {
      type: Boolean,
      default () {
        return false;
      }
    },
    nodeKey: {
      type: String,
      default () {
        return 'id';
      }
    },
    // 显示复选框情况下，是否严格遵循父子不互相关联
    checkStrictly: {
      type: Boolean,
      default () {
        return false;
      }
    },
    // 默认选中的节点key数组
    checkedKeys: {
      type: Array,
      default () {
        return [];
      }
    },
    size: {
      type: String,
      default () {
        return 'small';
      }
    },
    width: {
      type: Number,
      default () {
        return 250;
      }
    },
    height: {
      type: Number,
      default () {
        return 300;
      }
    }
  },
  data () {
    return {
      isShowSelect: false, // 是否显示树状选择器
      options: [],
      selectedData: [], // 选中的节点
      style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
      selectStyle: 'width:' + (this.width + 24) + 'px;',
      checkedIds: [],
      checkedData: []
    };
  },
  mounted () {
    this.initCheckedData();
  },
  methods: {
    // 单选时点击tree节点，设置select选项
    setSelectOption (node) {
      console.log(node,56)
      let tmpMap = {};
      tmpMap.value = node.key;
      tmpMap.label = node.label;
      this.options = [];
      this.options.push(tmpMap);
      this.selectedData = node.key;
    },
    // 单选，选中传进来的节点
    checkSelectedNode (checkedKeys) {
      var item = checkedKeys[0];
      this.$refs.tree.setCurrentKey(item);
      var node = this.$refs.tree.getNode(item);
      this.setSelectOption(node);
    },
    // 多选，勾选上传进来的节点
    checkSelectedNodes (checkedKeys) {
      this.$refs.tree.setCheckedKeys(checkedKeys);
    },
    // 单选，清空选中
    clearSelectedNode () {
      this.selectedData = '';
      this.$refs.tree.setCurrentKey(null);
    },
    // 多选，清空所有勾选
    clearSelectedNodes () {
      var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
      for (let i = 0; i < checkedKeys.length; i++) {
        this.$refs.tree.setChecked(checkedKeys[i], false);
      }
    },
    initCheckedData () {
      if (this.multiple) {
        // 多选
        if (this.checkedKeys.length > 0) {
          this.checkSelectedNodes(this.checkedKeys);
        } else {
          this.clearSelectedNodes();
        }
      } else {
        // 单选
        if (this.checkedKeys.length > 0) {
          this.checkSelectedNode(this.checkedKeys);
        } else {
          this.clearSelectedNode();
        }
      }
    },
    popoverHide () {
      if (this.multiple) {
        this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
        this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被选中的节点所组成的数组数据
      } else {
        this.checkedIds = this.$refs.tree.getCurrentKey();
        this.checkedData = this.$refs.tree.getCurrentNode();
      }
      this.$emit('popoverHide', this.checkedIds, this.checkedData);
    },
    // 单选，节点被点击时的回调,返回被点击的节点数据
    handleNodeClick (data, node) {
      if (!this.multiple) {
        this.setSelectOption(node);
        this.isShowSelect = !this.isShowSelect;
        this.$emit('change', this.selectedData);
      }
    },
    // 多选，节点勾选状态发生变化时的回调
    handleCheckChange () {
      var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
      this.options = checkedKeys.map((item) => {
        var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
        let tmpMap = {};
        tmpMap.value = node.key;
        tmpMap.label = node.label;
        return tmpMap;
      });
      this.selectedData = this.options.map((item) => {
        return item.value;
      });
      this.$emit('change', this.selectedData);
    },
    // 多选,删除任一select选项的回调
    removeSelectedNodes (val) {
      this.$refs.tree.setChecked(val, false);
      var node = this.$refs.tree.getNode(val);
      if (!this.checkStrictly && node.childNodes.length > 0) {
        this.treeToList(node).map(item => {
          if (item.childNodes.length <= 0) {
            this.$refs.tree.setChecked(item, false);
          }
        });
        this.handleCheckChange();
      }
      this.$emit('change', this.selectedData);
    },
    treeToList (tree) {
      var queen = [];
      var out = [];
      queen = queen.concat(tree);
      while (queen.length) {
        var first = queen.shift();
        if (first.childNodes) {
          queen = queen.concat(first.childNodes);
        }
        out.push(first);
      }
      return out;
    },
    // 单选,清空select输入框的回调
    removeSelectedNode () {
      this.clearSelectedNode();
      this.$emit('change', this.selectedData);
    },
    // 选中的select选项改变的回调
    changeSelectedNodes (selectedData) {
      // 多选,清空select输入框时，清除树勾选
      if (this.multiple && selectedData.length <= 0) {
        this.clearSelectedNodes();
      }
      this.$emit('change', this.selectedData);
    }
  },
  watch: {
    isShowSelect () {
      // 隐藏select自带的下拉框
      this.$refs.select.blur();
    },
    checkedKeys (val) {
      if (!val) return;
      // this.checkedKeys = val;
      this.initCheckedData();
    }
  }
};
</script>
 
<style scoped>
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 11;
  }
  .common-tree{
    overflow: auto;
  }
  .tree-select{
    z-index: 111;
  }
</style>

效果图如下：

在这里插入图片描述
优化

<template>
  <div>
    <tree-select :data="data"
                 :defaultProps="defaultProps" multiple
                 :nodeKey="nodeKey" :checkedKeys="defaultCheckedKeys"
                 @popoverHide="popoverHide"></tree-select>
  </div>
</template>
 
<script>
import TreeSelect from '@/components/HelloWorld.vue';
var menus = [
  {
    'menuId': 1,
    'menuName': '系统管理',
    'childrenList': [
      {
        'menuId': 100,
        'menuName': '用户管理',
        'childrenList': [
          {
            'menuId': 1000,
            'menuName': '用户查询'
          },
          {
            'menuId': 1001,
            'menuName': '用户新增'
          },
          {
            'menuId': 1002,
            'menuName': '用户修改'
          },
          {
            'menuId': 1003,
            'menuName': '用户删除'
          }
        ]
      },
      {
        'menuId': 101,
        'menuName': '角色管理',
        'childrenList': [
          {
            'menuId': 1006,
            'menuName': '角色查询'
          },
          {
            'menuId': 1007,
            'menuName': '角色新增'
          },
          {
            'menuId': 1008,
            'menuName': '角色修改'
          },
          {
            'menuId': 1011,
            'menuName': '删除角色'
          }
        ]
      }
    ]
  }
];
export default {
  components: { TreeSelect },
  data () {
    return {
      data: menus,
      defaultProps: {
        children: 'childrenList',
        label: 'menuName'
      },
      nodeKey: 'menuId',
      defaultCheckedKeys: []
    };
  },
  created () {
    // 注意：初始化defaultCheckedKeys时，在created里面
    // 父组件先执行自己的created，然后子组件开始执行自己的created和mounted，最后父组件再执行自己的mounted。
    // 因为此页面加载，先执行该组件自己的created，然后执行TreeSelect组件的created和mounted，最后执行该组件的mounted
    this.defaultCheckedKeys = [1000];
  },
  mounted () {
    // 此处初始化defaultCheckedKeys，没效果
    this.defaultCheckedKeys = [1001];
  },
  methods: {
    popoverHide (checkedIds, checkedData) {
      console.log(checkedIds);
      console.log(checkedData);
    }
  }
};
</script>
 
<style scoped>
 
</style>


<template>
  <div>
    <div class="mask" v-show="isShowSelect" @click="isShowSelect = !isShowSelect"></div>
    <el-popover placement="bottom-start" :width="width" trigger="manual"
                v-model="isShowSelect" @hide="popoverHide">
      <el-tree class="common-tree" :style="style" ref="tree" :data="data" :props="defaultProps"
               :show-checkbox="multiple"
               :node-key="nodeKey"
               :check-strictly="checkStrictly"
               default-expand-all
               :expand-on-click-node="false"
               :default-checked-keys="defaultCheckedKeys"
               :highlight-current="true"
               @node-click="handleNodeClick"
               @check-change="handleCheckChange"></el-tree>
      <el-select :style="selectStyle" slot="reference" ref="select"
                 v-model="selectedData"
                 :multiple="multiple"
                 @click.native="isShowSelect = !isShowSelect"
                 class="tree-select">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-popover>
  </div>
</template>
 
<script>
export default {
  name: 'tree-select',
  props: {
    // 树结构数据
    data: {
      type: Array,
      default () {
        return [];
      }
    },
    defaultProps: {
      type: Object,
      default () {
        return {};
      }
    },
    // 配置是否可多选
    multiple: {
      type: Boolean,
      default () {
        return false;
      }
    },
    nodeKey: {
      type: String,
      default () {
        return 'id';
      }
    },
    // 显示复选框情况下，是否严格遵循父子不互相关联
    checkStrictly: {
      type: Boolean,
      default () {
        return false;
      }
    },
    // 默认选中的节点key数组
    checkedKeys: {
      type: Array,
      default () {
        return [];
      }
    },
    width: {
      type: Number,
      default () {
        return 250;
      }
    },
    height: {
      type: Number,
      default () {
        return 300;
      }
    }
  },
  data () {
    return {
      defaultCheckedKeys: [],
      isShowSelect: false, // 是否显示树状选择器
      options: [],
      selectedData: [], // 选中的节点
      style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
      selectStyle: 'width:' + (this.width + 24) + 'px;',
      checkedIds: [],
      checkedData: []
    };
  },
  mounted () {
    if (this.checkedKeys.length > 0) {
      if (this.multiple) {
        this.defaultCheckedKeys = this.checkedKeys;
        this.selectedData = this.checkedKeys.map((item) => {
          var node = this.$refs.tree.getNode(item);
          return node.label;
        });
      } else {
        var item = this.checkedKeys[0];
        this.$refs.tree.setCurrentKey(item);
        var node = this.$refs.tree.getNode(item);
        this.selectedData = node.label;
      }
    }
  },
  methods: {
    popoverHide () {
      if (this.multiple) {
        this.checkedIds = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
        this.checkedData = this.$refs.tree.getCheckedNodes(); // 所有被选中的节点所组成的数组数据
      } else {
        this.checkedIds = this.$refs.tree.getCurrentKey();
        this.checkedData = this.$refs.tree.getCurrentNode();
      }
      this.$emit('popoverHide', this.checkedIds, this.checkedData);
    },
    // 节点被点击时的回调,返回被点击的节点数据
    handleNodeClick (data, node) {
      if (!this.multiple) {
        let tmpMap = {};
        tmpMap.value = node.key;
        tmpMap.label = node.label;
        this.options = [];
        this.options.push(tmpMap);
        this.selectedData = node.label;
        this.isShowSelect = !this.isShowSelect;
      }
    },
    // 节点选中状态发生变化时的回调
    handleCheckChange () {
      var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
      this.options = checkedKeys.map((item) => {
        var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
        let tmpMap = {};
        tmpMap.value = node.key;
        tmpMap.label = node.label;
        return tmpMap;
      });
      this.selectedData = this.options.map((item) => {
        return item.label;
      });
    }
  },
  watch: {
    isShowSelect () {
      // 隐藏select自带的下拉框
      this.$refs.select.blur();
    }
  }
};
</script>
 
<style scoped>
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .common-tree{
    overflow: auto;
  }
</style>
 
<style>
  .tree-select .el-select__tags .el-tag .el-tag__close{
    display: none;
  }
  .tree-select .el-select__tags .el-tag .el-icon-close{
    display: none;
  }
</style>

效果图如下：

在这里插入图片描述

程序猿向前跑
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element-ui tree组件自定义节点使用方法代码详解
12-29
工作上使用到element-ui tree 组件，主要功能是要实现节点拖拽和置顶，通过自定义内容方法（render-content）渲染树代码如下~ <el data=sortData node-key=id ref=sortTree expand-on-click-node=false render-...
element-ui树形控件el-tree详解
热门推荐
m0_63040701的博客
05-26 2万+
我这里不是直接用data来传递整个树的数据，而是用懒加载的方式，当点击一个节点的时候再进行树结构的添加。这里我利用element-ui开发一个vue的树形组件。修改vite.config.js配置按需加载。安装element-plus。
Element Ui 树形组件自定义样式与功能
我是一个酒鬼的博客
05-12 4483
Element Ui 树形组件自定义样式与功能，可实现树节点内容修改、增加节点、删除节点等，根据层级不同显示不同的图标等，已封装成组件
Element-UI封装El-Select-Tree组件(树形下拉选择器)
Sunny_boy
05-17 1051
封装Select-Tree组件
vue+Element-ui实现树形组件、表格树
丨康有为丨的博客
07-25 1万+
vue+Element-ui实现树形组件、表格树
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
Element-UI控件Tree实现数据树形结构
觉醒法师的专栏
03-29 5559
在前端开发中，有时会遇到所有菜单数据在同一级的情况，后端未对数据进行分级处理；但前端渲染需要是树状结构的数据，如何实现数据的树状化？将数组中通过父节点的ID与子节点的parentId关联，通过递归函数来实现。前端框架这里使用element-ui的tree控件来实现，对其不了解可以去官网查看文档。
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
a-tree 树型选择菜单组件关联节点选中动态设置
08-21
菜单多选设置，可用于权限多选，菜单多选等更多多选场景...描述,通过树型弹框可以点击选择不同节点，且动态关联节点选中设置；如果勾选，则选中父节点则子节点自动选中，取消反选，如果取消勾选，则父子节点没有关联；
基于java的开发源码-JSP树型菜单 DTree.zip
01-08
基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree.zip 基于java的开发源码-JSP树型菜单 DTree...
21.element el-table表格以及树形表格封装
weixin_38644630的博客
12-03 2879
21.element el-table表格以及树形表格封装 1.效果图 树形表格效果图 普通表格效果图 2.表格组件 组件名称:YpTable.vue 组件内容：当然有其他的需要加的可以自行添加一些其他类型 <template> <el-table :data="list" stripe border :default-expand-all="expand" row-key="id" :tree-props="{ children: children }"> &
ElementUI中Tree组件使用
w13966597931的博客
12-04 4980
首先，数据库表为： 查询接口返回的实体类为： 查询接口返回的数据格式：通过属性 children来判断是否有子节点。 需要注意的是： 1：树组件中 :data="deps" 加载树组建的数据。:props="defaultProps" 加载树组件的配置，其中label是给个枝叶的名字对应的字段，children是子节点对应的字段。:filter-node-method="filterNode" 树组件的搜索,filterNode过滤的回调，这个官网拷贝即可。:expand-on-click-no
element-ui树形控件（tree）
m0_51933554的博客
11-03 4178
element-ui树形控件（tree）
ElementUI之Tree树形控件使用
牧小七的博客
06-30 2587
以下列出的属性、事件、方法，可使用Tree控件实现节点的拖拽功能（可实现修改顺序、更换父级节点功能）、点击节点勾选复选框、只点击箭头图标展开和收缩节点、父子节点不级联勾选、默认展开全部节点功能。
element-ui之树形控件的使用
qq_49277509的博客
04-27 5881
代码虐我千百遍，我对代码如初恋，前前前前端静静又来更新博客了，本以为element-ui会让我写代码的速度快如闪电，一不留心，掉坑里了，花费我好长的时间才从深坑里面爬出来 首先，看一下效果图 ......
知识点10--element ui
别人笑我太疯癫，我笑他人看不穿。
07-09 1565
本章介绍一个前端渲染框架叫，是一个基于vue开发的组件库，它就相当于jquery的插件，不过它的作用和CSS的Bootstrap有些类似，具体更详细的了解大家可以去官网看一看你可以把它理解成一个含有CSS样式能力的渲染框架，后面给大家演示的时候一看就能明白，它本质上就是在单一的样式上加入了渲染效果，分为css和js两块代码，这是vue近些年在前端为什么这么火的原因，因为培养成本低，这就和python语言在人工智能领域很火一样，本质上并不是语言或框架的本身有多优秀，而是这个框架或语言对于企业来说，用人或培养成
Vue+elementui表格中的数据是树形结构实现全选
hyzzhmbb的博客
10-10 1762
因为树形结构的数据类型是嵌套的，elementui表格的全选没有办法实现选择子类。首先添加单选和全选事件，还有通过ref找到表格。通过以上事件就可以实现数据是树形结构的全选。那么我们要通过循环遍历来让子类也选中。data中定义一个储存选中数据的数组。
elementUI-Tree 树形控件的使用
m0_65022585的博客
09-30 3979
elementUI 使用树形控件实现学院专业的显示。
el-table中树型数据回显
最新发布
05-28
在Element UI中，可以使用el-table组件来呈现树形数据结构。在回显树形数据时，可以使用以下两种方式： 1. 使用自定义插槽 可以使用el-table-column的scoped-slot属性来自定义每个单元格的呈现方式。在呈现树形...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值