基于 el-tree 的本地搜索时显示子级 组件

html

<zc-tree v-model="addFormData.empData"
                     :isExpand="true"
                     :isFilter="true"
                     :searchName="'name'"
                     :nodeKey="nodeKey"
                     :Selecteds="addFormData.empData"
                     ref="treeData"
                     :options="empTreeData"
                     :props="propsData"></zc-tree>

js

import ZcTree from '../../../components/ZcTree'

data

empTreeData: [],
nodeKey: 'id',
propsData: {
    children: 'children',
    label: 'name',
    id: 'id'
 },
empObj: {}

js

getEmpTree () {
      let url = '/patient/bedNameTree'
      let data = {
        deptId: this.getSelectDeptInfo() || ''
      }
      AxiosApi(url, {}, 'GET', data).then(res => {
        this.empTreeData = res.data || []
        this.getChild(this.empTreeData)
        // console.log(this.empTreeData)
      })
    },
    // 查找子集
    getChild (data) {
      data.forEach((item) => {
        if (item.children && item.children.length > 0) {
          this.getChild(item.children)
        } else {
          this.empObj[item.id] = { ...item }
        }
      })
    },

js

let empData = this.$refs.treeData.TreeData

test

[
    {
        "children": [
            {
                "name": "马继顺(患者)",
                "id": "patient-16"
            }
        ],
        "name": "05",
        "id": 0
    },
    {
        "children": [
            {
                "name": "邹桂英(患者)",
                "id": "patient-15"
            },
            {
                "name": "顾娟(家属)",
                "id": "family-37474"
            },
            {
                "name": "林秀兰(家属)",
                "id": "family-37476"
            }
        ],
        "name": "06",
        "id": 1
    }
]

ZcTree.vue

<template>
  <div>
    <template v-if="isFilter">
      <div class="acms-filter">
        <el-row>
          <el-col :span="12">
            <el-input
              placeholder="请输入"
              :clearable="false"
              suffix-icon="el-icon-search"
              v-model="filterText">
            </el-input>
            <br>
            <span style="color: red;">搜索时间较长,请耐心等待</span>
          </el-col>
          <el-col :span="12">
            <template v-if="!filterText">
              <el-button @click="selectAll" class="select-all">全选</el-button>
              <el-button @click="deSelectAll" class="de-select-all">全不选</el-button>
            </template>
          </el-col>
        </el-row>
      </div>
    </template>
    <el-tree
      :data="data"
      :props="props"
      :check-strictly="checkStrictly"
      ref="tree"
      :node-key="nodeKey"
      @check="getCheckedKeys"
      show-checkbox
      :default-expand-all="isExpand"
      :filter-node-method="filterNode"
      :default-checked-keys="Selecteds">
    </el-tree>
  </div>
</template>
<script>
export default {
  props: {
    isExpand: {
      type: Boolean,
      default () {
        return false
      }
    },
    isFilter: {
      type: Boolean,
      default () {
        return false
      }
    },
    searchName: {
      type: String,
      default () {
        return 'deptName'
      }
    },
    nodeKey: {
      type: String,
      default () {
        return []
      }
    },
    Selecteds: {
      type: Array,
      default () {
        return []
      }
    },
    options: {
      type: Array,
      default () {
        return []
      }
    },
    // 树节点配置选项
    props: {
      type: Object,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      TreeData: [],
      AllData: [],
      flag: false,
      checkStrictly: false,
      filterText: ''
    }
  },
  watch: {
    Selecteds () {
      this.TreeData = this.Selecteds
    },
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  computed: {
    data () {
      return this.options
    }
  },
  methods: {
    orgCheckChange (data, checked, indeterminate) {
    },
    filterNode1 (value, data) {
      if (!value) {
        return true
      }
      return data[this.searchName].indexOf(value) !== -1
    },
    // 触发页面显示配置的筛选
    filterNode (value, data, node) {
      // 如果什么都没填就直接返回
      if (!value) return true
      // 如果传入的value和data中的label相同说明是匹配到了
      if (data[this.searchName].indexOf(value) !== -1) {
        return true
      }
      // 否则要去判断它是不是选中节点的子节点
      return this.checkBelongToChooseNode(value, data, node)
    },
    // 判断传入的节点是不是选中节点的子节点
    checkBelongToChooseNode (value, data, node) {
      // console.log(value)
      // console.log(data)
      // console.log(node)
      // let level = 2
      const level = node.level
      // 如果传入的节点本身就是一级节点就不用校验了
      if (level === 1) {
        return false
      }
      // 先取当前节点的父节点
      let parentData = node.parent
      // 遍历当前节点的父节点
      let index = 0
      while (index < level - 1) {
        // 如果匹配到直接返回
        if (parentData.data[this.searchName].indexOf(value) !== -1) {
          return true
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent
        index++
      }
      // 没匹配到返回false
      return false
    },
    /* 获取当前树的ID值 */
    getCheckedKeys (node, keys) {
      this.flag = true
      let checkedKeys = keys.checkedKeys
      let halfChecked = keys.halfCheckedKeys
      let checkArr = checkedKeys.concat(halfChecked)
      this.TreeData = checkedKeys
      this.AllData = checkArr
    },
    // 循环孩子
    selectChildren (arr) {
      for (let i = 0; i < arr.length; i++) {
        this.TreeData.push(arr[i][this.nodeKey])
        if (arr[i].children && arr[i].children.length > 0) {
          this.selectChildren(arr[i].children)
        }
      }
    },
    // 全选
    selectAll () {
      this.TreeData = []
      for (let i = 0; i < this.data.length; i++) {
        this.TreeData.push(this.data[i][this.nodeKey])
        if (this.data[i].children && this.data[i].children.length > 0) {
          this.selectChildren(this.data[i].children)
        }
      }
      this.flag = true
      this.$refs.tree.setCheckedNodes(this.data)
      this.$forceUpdate()
    },
    // 取消全选
    deSelectAll () {
      this.flag = true
      this.TreeData = []
      this.$refs.tree.setCheckedKeys([])
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="scss">
  .acms-filter {
    width: 100%;
    text-align: left;
    margin: 0 0 10px 10px;
    .el-input--small {
      width: 260px;
      margin-left: auto;
      margin-right: auto;
    }
    .select-all {
      background: #1e87f0;
      color: #ffffff;
      border-color: #1e87f0;
      margin: 0 0 10px 10px;
    }
    .de-select-all {
      margin: 0 0 10px 10px;
    }
  }
</style>
返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论