Vue+Elementui el-tree树只能选择子节点并且支持检索

效果：

只能选择子节点 添加配置添加检索代码

源码：

<template>
  <div>
      <el-button  size="small" type="primary" clearable :disabled="disabled" @click="showSign">
        危险点评估
      </el-button>
    <!-- 规则绑定流程节点-->
    <el-dialog title="危险点评估" :visible.sync="show" v-if="show" width="700px" append-to-body>
      <el-form ref="formEvaluate" :model="formEvaluate"  label-width="80px">

        <el-form-item label="危险点">
          <el-input
            placeholder="输入关键字进行检索"
            clearable
            v-model="filterText">
          </el-input>
          <el-tree
            ref="Tree"
            :data="treeData"
            :show-checkbox="true"
            :check-strictly="true"
            node-key="id"
            default-expand-all
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="nodeClick"
            :props="defaultProps"
            :check-on-click-node="true"
            @check="handleCheck"
            :filter-node-method="filterNode"
          >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                  <span class="custom-expand-icon" v-if="!data.children || data.children.length === 0">
                    <img src="@/assets/images/fl.png" class="icon" />
                  </span>
                  <span class="custom-expand-icon" v-else>
                    <img src="@/assets/images/home.png" class="icon" />
                  </span>
                  {{ data.treeName }}
                </span>
              </span>
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="saveGz">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { deptTreeSelect } from "@/api/system/user";
import { selectPcModelByTableZb } from '@/api/index-analysis/indicator-maintenance'
import { doubleTicketAppraise } from '@/api/flowable/definition'
export default {
  name: 'tsSelectTree',
  components: { Treeselect },
  props: {
    value: {
      default:''
    },
    conf: {
      type: Object
    },
    disabled: {}
  },
  data() {
    return {
      currentValue: undefined,
      filterText: '',
      options: [],
      list: [],
      loading: false,
      show:false,
      cache: [],
      input_val: this.value,
      object:this.conf,
      formEvaluate:{
        formName:null,
        formId:null,
        nodeId:null,
        nodeName:null,
        lcName:null,
        lcId:null,
        tableZbbmId:null,
        tableZbbmIds:[],
      },
      //规则数据
      treeData:[],
      //选中的数据json数组
      jsonData:[],
      evaluateArr:[],
      defaultProps: {
        children: "children",
        label: "label",
        disabled: function (data, node) {//带子级的节点不能选中
          if (data.children && data.children.length > 0) {
            return true
          } else {
            return false
          }
        }
      },
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          if (this.multiple) {
            if (Object.prototype.toString.call(val) === '[object String]') {
              try {
                this.currentValue = JSON.parse(val)
              } catch (e) {
                this.currentValue = val.split(',')
              }
            }
            if (Object.prototype.toString.call(val) === '[object Array]') {
              this.currentValue = val
            }
          } else {
            this.currentValue = val || undefined
          }
        }
      },
      immediate: true,
      deep: true
    },
    currentValue() {
      this.$emit('input', this.currentValue)
      this.$emit('change', this.currentValue)
    },
    filterText(val) {
      this.$refs.Tree.filter(val);
    }
  },
  created() {
    this.getDate()
    const object = this.object
    this.getTreeList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.treeName.indexOf(value) !== -1;
    },
    handleCheck(data,node){
      this.evaluateArr = node.checkedNodes
    },
    // 点击树节点 多选逻辑todo
    nodeClick(data,node, indeterminate) {
      if(node.childNodes.length > 0){
        return
      }
    },
    cancel(){
      this.show = false
    },
    showSign() {
      this.show = true;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.currentValue = data.label;
      sessionStorage.setItem('deptId',data.id)
      this.show = false
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.getDate(query)
        }, 500)
      } else {
        this.options = this.cache
      }
    },
    getDate(query) {
      deptTreeSelect().then((response) => {
        // 获取树形的部门数据
        this.options = response.data;
        sessionStorage.setItem('deptInfo',this.options && JSON.stringify(this.options))
      });
    },
    getTreeList() {
      const params = {
        tableZb:'WXDPG'
      };
      selectPcModelByTableZb(params).then((response) => {
        this.treeData = response.data;
      });
    },
    saveGz(){
      this.formEvaluate.tableZbbmId = ''
      this.formEvaluate.tableZbbmIds = []
      const arr = this.evaluateArr
      if(this.evaluateArr.length ==0){
        this.$message.warning('请选择一条危险点')
        return
      }
    },
  }
}
</script>