elementUI树状控件里数据的操作

一.实现样式

 树长这样

名字过滤 这块 elementUI 文档里有

显示过滤之后如下

二.代码

<el-input placeholder="输入名称进行过滤" v-model="filterText">
</el-input>
<div style="padding: 10px 20px;">
  仅显示在线人员( {
   
   { this.allData.length }}人 )
  <el-switch v-model="onlyOnline" @change="changeonline" active-color="#13ce66">
  </el-switch>
</div>
<el-tree class="filter-tree" :data="treeData" :props="defaultProps" show-checkbox @check="handleCheckChange"
  :filter-node-method="filterNode" ref="tree">
  <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>{
   
   { node.label }}</span>
    <span v-if="data.isWordCard">
      <i class="el-icon-s-opportunity" :class="data.isOnLine ? 'green' : ''"></i>
    </span>
  </span>
</el-tree>

data里声明

flag: true,
onlyOnline: false,
defaultProps: {
    children: 'children',
    label: 'name'
},
filterText: '',

监听输入框内发生变化时过滤搜索树  这是 el-tree 里自带的方法

watch: {
  filterText(val) {
    this.flag = true
    this.$refs.tree.filter(val);
  }
},

 methods 里的方法

// 是否只展示在线人员
changeonline() {
  if (this.onlyOnline) {
    this.flag = false
    this.$refs.tree.filter();
  } else {
    this.flag = true
    this.$refs.tree.filter(undefined);
  }
},

// 树状图勾选时  处理数据 得到下方接口调用需要的数据类型
handleCheckChange(data, checked) {
  let arr = []
  this.checkArr = []
  if (checked.checkedNodes && checked.checkedNodes.length) {
    arr = checked.checkedNodes
    this.closure(arr)
    if (arr && arr.length) {
      arr.forEach(item => {
        if (item.isWordCard && item.isOnLine) {
          this.checkArr.push(item.workCardKey)
        }
      })
    }
  }
},

// 闭包删除
closure(arr) {
  if (arr && arr.length) {
    arr.forEach((item, index) => {
      if (item.children && item.children.length) {
        arr.splice(index, 1)
        this.closure(arr)
      }
    })
  }
},

// 树状图过滤
filterNode(value, data) {
  if (this.flag) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  } else {
    return data.isWordCard && data.isOnLine
  }
},