el-tree公共组件（带操作按钮）源码分享

作者: 知文图鉴 | 来源:发表于2020-10-02 21:02 被阅读0次

el-tree公共组件（带操作按钮）源码分享
UGUI Button扩展：双击按钮、长按按钮和透明按钮（无Dr
前端开发项目前期准备工作
009--cc.Button
Vue组件开发系列之Button组件
2021-09-10 iview tabel添加个icon图标
Vue+element ui树形菜单
vue动态组件
视频页面
组件递归 & js递归

介绍一款基于vue-elementui的tree树形公共组件

效果如下图：

13a3a72e549540fabc3c359ad3f58e27.png

提供源码：

template

<template>
  <div class="el-tree-div" :class="{'show-tree':showTree,'hide-tree':!showTree}">
    <div class="el-tree-top">
      <div class="el-tree-title">
        <span v-show="showTree">{{treeTitle}}</span>
        <el-link type="primary" :underline="false" class="inline-block refresh-tree" v-show="showTree&&refresh" @click="clickFresh">
          <svg-icon icon-class="refresh"/>刷新</el-link>
      </div>
      <svg-icon class="inline-block change-nav-i show-tree-icon" :icon-class="showTree?'put':'open'" @click.native="changeShowTree"/>
    </div>
    <div class="el-tree-content" v-show="showTree">
      <el-input placeholder="输入关键字进行过滤" v-model.trim="filterText" clearable size="small"></el-input>
      <div class="tree-body" :class="{'can-add-first-node':canAddFirstNode}">
        <el-tree
          :class="{'tree-no-data':!treeData}"
          ref="tree"
          :data="treeData"
          :show-checkbox="showCheck"
          :check-strictly="checkStrictly"
          :default-expand-all="defaultExpandAll"
          :expand-on-click-node="false"
          highlight-current
          @node-click="handleNodeClick"
          @check-change="handleCheckChange"
          node-key="id"
          :default-expanded-keys="[]"
          :default-checked-keys="[]"
          :filter-node-method="filterNode"
          :props="treeProps"
          :render-content="showRender?renderContent:''">
        </el-tree>
      </div>
    </div>
  </div>
</template>

script

<script>
export default {
  name: 'el-tree-div',
  props:['treeData','treeTitle','showRender','refresh','delMsg','showCheck','checkStrictly','defaultExpandAll','showAllBtn','canAddFirstNode'],
  components: {},
  data() {
    return {
      showTree:true,
      filterText: '',
      treeProps: {
        children: 'children',
        label: 'label'
      },
    };
  },
  created() {

  },
  mounted() {
    this.filterText = '';
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // check点击
    handleCheckChange(data) {
      this.$emit("checkNode",data,this.$refs.tree.getCheckedNodes());
    },
    // 点击节点
    handleNodeClick(data) {
      this.$emit("clickNode",data);
    },
    // 返回选中节点数据
    getCheckedNodes() {
      this.$emit("getCheckedNodes",this.$refs.tree.getCheckedNodes());
    },
    // 返回选中节点key数组
    getCheckedKeys() {
      this.$emit("getCheckedKeys",this.$refs.tree.getCheckedKeys());
    },
    // 通过node节点渲染选中的元素
    setCheckedNodes(nodes) {
      this.$refs.tree.setCheckedNodes(nodes);
    },
    // 通过id数组渲染选中的元素
    setCheckedKeys(arr) {
      this.$refs.tree.setCheckedKeys(arr);
    },
    // 移除tree中选中的元素
    delTreeCheck(id){
      let getCheckedKeys = this.$refs.tree.getCheckedKeys();
      for(var i in getCheckedKeys){
        if(getCheckedKeys[i] == id){
          getCheckedKeys.splice(i,1);
        }
      }
      this.setCheckedKeys(getCheckedKeys);
    },
    // 折叠展开tree
    changeShowTree(){
      if(this.showTree){
        this.$emit("changeShowTree",false);
      }else{
        this.$emit("changeShowTree",true);
      }
      this.showTree = !this.showTree;
    },
    // 渲染树形图自定义插件
    renderContent: function(h, data) {
        let _this = this;
        return h('span', {}, [
            h('span', data.data.label),
            h("el-link", {
                class: 'article-classify-add',
                props: {
                    type: 'info'
                },
                title: '添加',
                on: {
                    click: function(event) {
              event.stopPropagation();
              _this.$emit("getAdd",data.data);
                        // _this.articleClassifyAdd(event,data.data);
                    },
                }
            }, ''),
            h("el-link", {
                class: 'article-classify-edit',
                props: {
                    type: 'primary'
                },
                title: '编辑',
                on: {
                    click: function(event) {
              event.stopPropagation();
              _this.$emit("getEdit",data.data);
                        // _this.articleClassifyEdit(event,data.data);
                    },
                }
            }, ''),
            h("el-link", {
                class: data.data.parentId != "0" || this.showAllBtn ? 'article-classify-del' : '',
                props: {
                    type: 'danger'
                },
                title: '删除',
                on: {
                    click: function(event) {
              event.stopPropagation();
              if(data.data.parentId == "0" && !_this.showAllBtn){
                _this.$warning("主企业不能删除!");
                return;
              }
              if(!_this.delMsg){
                _this.delMsg = "删除后不可恢复,请确认后删除!";
              }
              _this.$confirm(_this.delMsg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                _this.$emit("getDel",data.data);
              }).catch(() => {});
                        // _this.articleClassifyDel(event,data.data);
                    },
                }
            }, ''),
        ])
    },
    // 点击刷新按钮
    clickFresh(){
      this.filterText = '';
      this.$emit("clickFresh");
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  }
};
</script>

style

<style scoped>
.el-tree-div{border: 1px solid #E4E4E4;background-color: white;height: auto;box-shadow: 0 0 10px #E8F4FF;border-radius: 3px;}
.el-tree-top{padding-left: 16px;line-height: 30px;height: 30px;border-bottom: 1px solid #E4E4E4;background-color: #fff;position: relative;}
.refresh-tree{margin-left:12px; line-height: 30px;}
.refresh-tree .svg-icon {vertical-align: -0.1em; margin-right:4px;}
.el-tree-title{font-size: 14px;font-weight: 700;}
.show-tree-icon{position: absolute;right: 8px; color: #54595c; top: 16px; width: 20px; height: 15px;margin: 0;font-size: 20px;cursor: pointer;}
.el-tree-content{padding: 10px;}
.tree-body{margin-top: 10px;height: auto;overflow: auto;}
.tree-body .el-tree{width: fit-content;font-size: 12px;min-width: max-content;}
.tree-body /deep/ .el-tree__empty-block{width: 278px;}
.tree-no-data{width: 100%!important;}
.hide-tree .el-tree-top{height: 500px;}
.hide-tree .show-tree-icon{right: 5px;}
.tree-body /deep/ .article-classify-add,.tree-body /deep/ .article-classify-edit,.tree-body /deep/ .article-classify-del {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  border-radius: 3px;
  background-size: 100%;
}
.tree-body /deep/ .article-classify-add {
  background-color: #409eff;
  margin-left: 20px;
  background: url(https://图标路径/tree-add-icon.png) no-repeat center center;
}
.tree-body /deep/ .article-classify-edit {
  background-color: #409eff;
  margin-left: 5px;
  background: url(https://图标路径/tree-edit-icon.png) no-repeat center center;
}
.tree-body /deep/ .article-classify-del {
  background-color: #f56c6c;
  margin-left: 5px;
  background: url(https://图标路径/tree-reduce-icon.png) no-repeat center center;
}
.can-add-first-node /deep/ .el-tree-node:nth-last-child(2) .el-link{display: none;}
.can-add-first-node /deep/ .el-tree-node:nth-last-child(2)>div>span>span{display: inline-block;width: 200px;text-align: center;color: #0994DC;}
.el-tree-content /deep/ .el-link{opacity: 0;}
.el-tree-content /deep/ .el-link:last-child{margin-right: 60px;}
.el-tree-content /deep/ .el-tree-node__content:hover .el-link{opacity: 1;}
.el-tree--highlight-current{width: 100% !important;}
</style>

可能发布以后格式有点乱，复制之后格式化就好

很实用，望小伙伴们点赞、分享、收藏，不然以后找不着的嘿

el-tree公共组件（带操作按钮）源码分享
介绍一款基于vue-elementui的tree树形公共组件效果如下图：提供源码： template scri...
UGUI Button扩展：双击按钮、长按按钮和透明按钮（无Dr
Unity自定义UI组件(四)双击按钮、长按按钮首先非常感谢上述博主分享的思路和部分源码，不过因为源码并没有完全...
前端开发项目前期准备工作
定义公共组件：比如按钮，列表这些复用多的，可以写公共组件出来，如果已经有这个组件，可以按照Ui样式...
009--cc.Button
1:添加按钮的方法(1)直接创建带Button组件的节点;(2) 先创建节点，再添加组件;2:按钮组件, 按钮是游...
Vue组件开发系列之Button组件
一个按钮组件演示地址：http://widget-ui.cn/Button 组件源码：https://githu...
2021-09-10 iview tabel添加个icon图标
iview Table组件渲染操作按钮, render 渲染icon图标更改方法问题描述: Table组件操作,i...
Vue+element ui树形菜单
效果图：源码： Title
vue动态组件
引入组件，注册组件用component标签插入组件，用is来指向组件名称，:is来动态改变组件名称用按钮操作组...
视频页面
一、自定义视频操作按钮由于原video组件不方便操作，所以果断放弃使用自定义页面组件配合js操作video，同时...
组件递归 & js递归
一、el-tree实现原理—组件递归举一个栗子： 1、组件引入，并调用。组件name为“func-table” ...