element el-tree 树筛选赋值

表单项：

<el-form-item label="报告人" prop="reporter">
<el-col :span="18">
<el-input v-model.trim="dialog.data.reporterId" style="display: none"></el-input>
<el-input v-model.trim="dialog.data.reporter" disabled></el-input>
</el-col>
<el-col :span="6">
<el-popover ref="popover" placement="bottom" width="400" trigger="click" >
<el-input placeholder="输入关键字"
v-model.trim="filterText"> </el-input>
<el-tree
class="filter-tree"
ref="tree"
:data="receivers"
:filter-node-method="filterNode"
:props="defaultProps"
@node-click="handleNodeClick"
node-key="orgId"
:default-expanded-keys="[defaultExpandedKey]" style="height: 250px;overflow-y: auto;"
></el-tree>
<el-button slot="reference" type="primary">选择</el-button>
</el-popover>
</el-col>
</el-form-item>

data中定义：

filterText:"",
defaultProps:{
children: 'children',
label: 'orgName' // 这里的名字要与封装的数据中的节点字段名一样
},
defaultExpandedKey:"",//默认展开层级
receivers:[],

实时筛选：

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

点击树赋值：

// 筛选接收人员
filterNode(value, data) {
if (!value) return true;
return data.orgName.indexOf(value) !== -1;
},
// 报告人
handleNodeClick(data) {
if(data.orgType == 'U'){
this.dialog.data.reporterId=data.orgId;
this.dialog.data.reporter=data.orgName;
}
this.$forceUpdate();
},

最后

以上就是辛勤电话为你收集整理的element el-tree 树筛选赋值的全部内容，希望文章能够帮你解决element el-tree 树筛选赋值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。