如果本地启动API需要全局安装:npm install -g @vuese/cli
需在main.js注册组件:
import ElTreeSelect from 'el-tree-select';
vue.use(ElTreeSelect);
内部直接使用 : <el-tree-select v-model="id"/>
el-tree-select Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
selectParams | el-select组件的相关参数Select Attributes | boolean / string / number/function | — | — |
1.styles | styles参数对el-select设置style | Object | — | — |
2.selectClass | 对el-select设置class | String | — | — |
treeParams | el-tree组件的相关参数Tree Attributes | boolean / string / number/function | — | — |
1.clickParent | treeParams.clickParent | Boolean | true 允许点击父级关闭弹出框; false 只能点击子级关闭弹出框 | false |
2.filterable | 搜索框参数 | Boolean | — | — |
popover 参数 | 对应:popper-class | String | — | — |
el-tree-select 取消el-select和el-tree中的参数
el-select 取消参数 | 取代参数 |
---|
multiple | 改为内置,通过v-model类型判断是否多选 |
filterable | filterable=“false” 搜索从弹出框里面执行 |
el-tree 取消参数 | 取代参数 |
show-checkbox | :show-checkbox="selectParams.multiple"使用下拉框参数multiple 判断是否对树进行多项 |
node-key | propsValue,自动获取treeParams.props.value |
draggable | 设置draggable=“false” 屏蔽拖动 |
el-tree-select Events
事件名称 | 说明 | 回调参数 |
---|
select-clear | 下拉框清空事件 | this.$emit(‘select-clear’) |
removeTag | 移除单个标签,返回所有勾选的ids,以及当前移除的tag(可能为中文)标签 | this.$emit(‘removeTag’,ids,tag) |
node-click | 树点击,和el-tree参数一致 | this.$emit(‘node-click’, data, node, vm) |
check | 勾选触发,和el-tree参数一致 | this.$emit(‘check’,data, node, vm) |
treeDataUpdateFun | 树更新数据 | this.post(url,postobj,response=>{this.$refs.treeSelect.treeDataUpdateFun(response.data);}) |
searchFun | 参数: keywords | searchFun(value){// 如果是本地过滤 this.$refs.treeSelect.$refs.tree.filter(value);// 可以直接访问方法,也可以拿到 $refs.tree this.$refs.treeSelect.filterFun(val);// 如果是请求后台:this.post(url,postobj{keywords:value},response=>{this.$refs.treeSelect.treeDataUpdateFun(response.data);});} |
filterFun | 参数: 本地过滤树 | this.$refs.treeSelect.filterFun(val); |
安装
npm install el-tree-select --save-dev
Demo
<template>
<div id="app">
<el-tree-select :styles="styles" v-model="values" :selectParams="selectParams" :treeParams="treeParams" :treeRenderFun="_renderFun" @searchFun="_searchFun" @node-click="_nodeClickFun" ref="treeSelect"/>
<el-select multiple v-model="test" placeholder="请选择" @change="_selectChange">
<el-option v-for="item in treeParams.data" :key="item.testId" :label="item.name" :value="item.testId"></el-option>
</el-select>
</div>
</template>
<style>
#app {
display: flex;
justify-content: space-between;
width: 600px;
}
</style>
<script>
export default {
name: 'App',
data() {
return {
styles: {
width: '300px'
},
test: '',
values: ['11111'],
selectParams: {
multiple: true,
clearable: true,
placeholder: '请输入内容'
},
treeParams: {
clickParent: false,
filterable: true,
'check-strictly': true,
'default-expand-all': true,
'expand-on-click-node': false,
data: [],
props: {
children: 'child',
label: 'name',
disabled: 'disabled',
value: 'testId'
}
}
};
},
mounted() {
let data = [
{
testId: '1',
name: '节点1',
disabled: true,
child: [
{
testId: '11111',
name: '子节点'
}
]
},
{
testId: '2',
name: '节点2',
child: [
{
testId: '222222',
disabled: true,
name: '子节点'
}
]
},
{
testId: '3',
name: '节点3'
},
{
testId: '4',
name: '节点4'
},
{
testId: '5',
name: '节点5'
},
{
testId: '6',
name: '节点6'
}
];
this.treeParams.data = data;
this.$refs.treeSelect.treeDataUpdateFun(data);
},
methods: {
_selectChange(val) {
console.log(val, '<-select change');
},
_nodeClickFun(data, node, vm) {
console.log('this _nodeClickFun', this.values, data, node);
},
_searchFun(value) {
console.log(value, '<--_searchFun');
this.$refs.treeSelect.filterFun(value);
},
_renderFun(h, { node, data, store }) {
return (
<span class='custom-tree-node'>
<span>{node.label}</span>
</span>
);
}
},
components: { }
};
</script>