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-inputplaceholder="输入关键字进行检索"clearablev-model="filterText"></el-input><el-treeref="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.objectthis.getTreeList()},methods: {filterNode(value, data) {if (!value) return true;return data.treeName.indexOf(value) !== -1;},handleCheck(data,node){this.evaluateArr = node.checkedNodes},// 点击树节点 多选逻辑todonodeClick(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 = truesetTimeout(() => {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.evaluateArrif(this.evaluateArr.length ==0){this.$message.warning('请选择一条危险点')return}},}
}
</script>