el-tree懒加载，点击或者输入过滤条件时才请求下一级数据

长相思979

于 2024-03-19 10:48:40 发布

阅读量404

点赞数 8

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_63896561/article/details/136835282

版权

  <template>
    <!-- check-strictly="true"表示父子节点选择时不进行联动 -->
    <!-- 添加了lazy属性，并未使用:load属性(因为如果使用过滤功能请求后台数据是有局限性的) -->
    <!-- node-expand属性是展开树节点时调用 -->
    <el-input
      placeholder="输入关键字进行搜索"
      v-model="filterText"
      @input="inputChange"
      style="border:2px solid #1d39c5"
      class="filterInput">
      <template slot="prepend">搜索：</template>
    </el-input>
    <el-tree
      ref="tree"
      class="filter-tree"
      lazy
      :data="treedata"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :check-strictly="true"
      show-checkbox
      node-key="id"
      @node-expand="nodeClick"
    >
    </el-tree>
  </template>
  <script>
    data(){
      return {
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'diagnosisContent',
          id:'diagnosisId',
          isLeaf: 'leaf'
        },
        treedata:[],
        checkedTreeList:[],//左侧tree选中项IDList
    },
    methods:{
      nodeClick(data,node,com){
        if(node.expanded){
          getIcdDict({diagnosisId:data.diagnosisId,bodyDiagId:data.bodyDiagId}).then(res => 
           {
            if(res.code !== 1) return
            let temp = res.data.map(item => {
                if(item.count == 0){
                  item.leaf = true
                }else{
                  item.leaf = false
                }
                return item
              })
            this.treedata = this.getNode(this.treedata,'diagnosisId',data.diagnosisId,temp)
          })
        }
      }, 
      filterNode(value, data) {
        if (!value) return true;
        return data.diagnosisContent.indexOf(value) !== -1;
      },
    },
    watch:{
      filterText(val) {
        getIcdDict({icdName:val}).then(res => {
          if(res.code !== 1) return
          this.treedata = res.data.map(item => {
            if(item.count == 0){
              item.leaf = true
            }else{
              item.leaf = false
            }
            return item
          })
        })
      }
    }
  </script>