Element 总结关于 element UI + vue tree 的坑

buddhaPig · 2018年07月12日 · 最后由 es6china 回复于 2018年07月12日 · 405 次阅读

单选树的问题

element ui 官方没有提供单选方案所以需要自己来改造一下,下面的是我改造的一颗树废话不说,直接上代码

html部分

<el-input
  v-if="!NOfilterText"
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>
<div class="tree treeWarp">
  <el-tree
    :data="treeData"
    show-checkbox
    :node-key="KeyId"
    :props="defaultProps"
    check-strictly
    @user1="handleClick"
    :filter-node-method="filterNode"
    ref="treeForm" >
  </el-tree>
</div>

这个部分需要注意的是设置node-key值,这个值在整个树必须唯一

js部分

props: ["treeData","defaultProps","KeyId","NOfilterText"],
  data() {
    return {
      i: 0,
        filterText:""
    }
  },
  watch: {
      filterText(val) {
          this.$refs.treeForm.filter(val);
      },
      treeData() {
          this.i=0;
    }
  },
  methods:{
      //点击选中左边树
      handleClick(data,checked, node) {
          this.i++;
          //解决第一次点击时点击不上的bug
          if(this.i==1){
              this.$emit('getselected', data);
          }
          if(this.i%2==0){
              this.$refs.treeForm.setCheckedNodes([]);
              this.$refs.treeForm.setCheckedNodes([data]);
              this.$emit('getselected', data);
          }
      },
      //搜索
      filterNode(value, data) {
          if (!value) return true;
          return data[this.defaultProps.label].indexOf(value) !== -1;
      },
}

这部分主要是用于处理点击后返回值和重置其他选项,注意点:

1、node_key必须唯一,不然的话不能重置选项,

2、defaultProps.label必须要传,这个主要是用于实现搜索的,

3、在watch中,treeData的值变化了必须要把i的值重置,不然会出现点击选中的时候条件判断不准确,会选中两个,

css部分

因为这种方式做出来的单选树样式还是多选的样式,所以需要去冲,

.tree{
 . el-icon-caret-right:before{
      content: "\E602";
    }
     .expanded.el-icon-caret-right{
      transform: rotate(0);
    }
     .expanded.el-icon-caret-right:before{
      content: "\E63C";
    }

    .el-checkbox__inner{
      border: 1px solid #dcdfe6;
      border-radius: 100%;
      width: 14px;
      height: 14px;
      background-color: #fff;
      cursor: pointer;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
    }
    .el-checkbox__inner:after{
      width: 4px;
      height: 4px;
      border-radius: 100%;
      background-color: #fff;
      content: "";
      position: absolute;
      border: none;
      left:30%;
      top:30%;
      -webkit-transform: translate(-50%,-50%) scale(0);
      transform: translate(-50%,-50%) scale(0);
      -webkit-transition: -webkit-transform .15s cubic-bezier(.71,-.46,.88,.6);
      transition: -webkit-transform .15s cubic-bezier(.71,-.46,.88,.6);
      transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
      transition: transform .15s cubic-bezier(.71,-.46,.88,.6), -webkit-transform .15s cubic-bezier(.71,-.46,.88,.6);
      transition: transform .15s cubic-bezier(.71,-.46,.88,.6),-webkit-transform .15s cubic-bezier(.71,-.46,.88,.6);
    }
}

这里是通过改写原本的图标来改变的选中样式,要注意的是权重只能加到这个样子,不然选中的时候就出现不了样式了

另外原本树的多选是所有的都能选中,有时候我们不需要选中父元素,只能选择子元素,这样的话我这边也是通过css去控制的,实测了两级树没有问题,多级的话没去测过,下面是代码


.is-focusable > .el-tree-node__content .el-checkbox{display: none}
.el-tree-node__children .is-focusable   .el-tree-node__content .el-checkbox{display: inline-block}
.el-tree-node__children .is-focusable   .el-tree-node__content .el-tree-node__expand-icon {display: none}
共收到 1 条回复

厉害,点个赞👏 👏 👏 👏

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册