html部分：
<el-form-item label="执行主体"><el-selectv-model="orgName":popper-append-to-body="false"ref="selectTree"clearable@clear="clearOrgNames">// 不需要过滤可以屏蔽这段<el-input placeholder="输入关键字进行过滤" v-model="filterName" class="filterStyle" /><el-option :value="orgList"><el-treeclass="unit-tree":data="executeList"node-key="id":props="defaultProps":default-expanded-keys="orgIds"ref="tree"highlight-current:expand-on-click-node="false"@node-click="nodeClickHandle":filter-node-method="filterNode" //配合过滤使用的></el-tree></el-option></el-select></el-form-item>
js相关代码：
data() {return {// 执行主体机构列表executeList: [], // 存放从后端获取的树形数据filterName: "",orgList: "",orgIds: [],orgName: "",defaultProps: {children: "children",label: "name",},};},watch: {filterName(val) {this.$refs.tree.filter(val);},},method: {// 清空执行主体选项clearOrgNames() {List = "";Ids = [];Name = "";},// 筛选filterNode(value, data) {if (!value) return true;return data.name.indexOf(value) !== -1;},// 点击节点选中nodeClickHandle(data) {Name = data.name; this.$refs.selectTree.blur(); },}
css相关代码：
<style lang="scss" scoped>.el-select-dropdown__item {height: 200px !important;min-width: 260px;overflow-y: scroll !important;}.el-select-dropdown__item {background: #fff !important;}.el-select-dropdown__item::-webkit-scrollbar {width: 6px;background-color: #f5f5f5;}.el-select-dropdown__item::-webkit-scrollbar-thumb {background-color: #c1c1c1;border-radius: 6px;}.filterStyle {padding: 5px 20px;width: 260px;}</style>
下面看看效果：
