问题:树节点过滤结果不生效 组件很简单 事件也很简单 我就不多说了 我遇见的问题是因为我还做了 树 X轴 溢出显示滚动条 导致 过滤数据不变化了
解决:我这个是样式导致的 display:block这个
<el-input placeholder="请输入" v-model="treeSearch">
<el-button
slot="append"
icon="el-icon-search"
@click="searchTree"
></el-button>
</el-input>
<el-tree
class="filter-tree"
:data="deviceTree"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree"
:highlight-current="highLight"
@node-click="handleNodeClick"
node-key="id"
v-loading="treeLoading"
>
</el-tree>
<script>
data() {
return {
deviceTree: [],
defaultProps: {
children: "children",
label: "deviceName",
},
}
}
methods:{
filterNode(value, data) {
// console.log(data);
if (!value) return true;
// console.log(data.deviceName.indexOf(value) !== -1);
return data.deviceName.indexOf(value) !== -1;
},
}
</script>
// 这个是树 X轴也能出滚动条 不能加display:block 不然过滤就不生效了
::v-deep .el-tree-node {
min-width: 100% !important;
// display: block !important;
float: left;
}