mirror of https://github.com/ElemeFE/element
23 KiB
23 KiB
TreeSelect 树形选择器
含有下拉菜单的树形选择器，结合了 el-tree 和 el-select 两个组件的功能。
基础单选
:::demo
<template>
<el-row :gutter="12">
<el-col :span="12">
<p>click text to select</p>
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
@change="handleNodeChange"
/>
</el-col>
<el-col :span="12">
<p>show-checkbox</p>
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
show-checkbox
@change="handleNodeChange"
/>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
value1: "",
value2: "",
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
handleNodeChange(e) {
console.log(e);
}
}
}
</script>
:::
选择任意级别
当属性 check-strictly=true 时，任何节点都可以被选择，否则只有子节点可被选择。
:::demo
<el-row :gutter="12">
<el-col :span="12">
<p>click text to select</p>
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
check-strictly
@change="handleNodeChange"
/>
</el-col>
<el-col :span="12">
<p>show-checkbox, only click checkbox to select</p>
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
show-checkbox
check-strictly
@change="handleNodeChange"
/>
</el-col>
</el-row>
<script>
export default {
data() {
return {
value1: "",
value2: "",
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
handleNodeChange(e) {
console.log(e);
}
}
}
</script>
:::
多选
通过点击或复选框选择多个选项。 :::demo
<el-row :gutter="12">
<el-col :span="8">
<p>click text to select</p>
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
multiple
@change="handleNodeChange"
/>
</el-col>
<el-col :span="8">
<p>show checkbox</p>
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
multiple
show-checkbox
@change="handleNodeChange"
/>
</el-col>
<el-col :span="8">
<p>show checkbox with `check-strictly`</p>
<el-tree-select
placeholder="Select"
v-model="value3"
:data="data"
multiple
show-checkbox
check-strictly
@change="handleNodeChange"
/>
</el-col>
</el-row>
<script>
export default {
data() {
return {
value1: [],
value2: [],
value3: [],
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
handleNodeChange(e) {
console.log(e);
}
}
}
</script>
:::
可清空选项
包含清空按钮，可将选择器清空为初始状态，为el-tree-select设置clearable属性，则可将选择器清空
:::demo
<el-row :gutter="12">
<el-col :span="12">
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
clearable
/>
</el-col>
<el-col :span="12">
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
multiple
show-checkbox
clearable
/>
</el-col>
</el-row>
<script>
export default {
data() {
return {
value1: "",
value2: "",
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
handleNodeChange(e) {
console.log(e);
}
}
}
</script>
:::
禁用选项
使用 disabled 字段禁用选项。
:::demo
<el-tree-select
placeholder="Select"
v-model="value"
:data="data"
/>
<script>
export default {
data() {
return {
value: "",
data: [
{
value: "1",
label: "Level One 1",
disabled: true,
children: [
{
value: "1-1",
label: "Level Two 1-1",
disabled: true,
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
disabled: true,
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
}
</script>
:::
可筛选
使用关键字筛选或自定义筛选方法。 filterMethod可以自定义数据筛选的方法。
:::demo
<el-row :gutter="12">
<el-col :span="12">
<p>filterable</p>
<el-tree-select
placeholder="Select"
v-model="value1"
:data="data"
filterable
/>
</el-col>
<el-col :span="12">
<p>filterMethod</p>
<el-tree-select
placeholder="Select"
v-model="value2"
:data="data"
filterable
:filter-method="filterMethod"
/>
</el-col>
</el-row>
<script>
export default {
data() {
return {
value1: "",
value2: "",
data: [
{
value: "1",
label: "Level One 1",
children: [
{
value: "1-1",
label: "Level Two 1-1",
children: [
{
value: "1-1-1",
label: "Level Three 1-1-1",
},
],
},
],
},
{
value: "2",
label: "Level One 2",
children: [
{
value: "2-1",
label: "Level Two 2-1",
children: [
{
value: "2-1-1",
label: "Level Three 2-1-1",
},
],
},
{
value: "2-2",
label: "Level Two 2-2",
children: [
{
value: "2-2-1",
label: "Level Three 2-2-1",
},
],
},
],
},
{
value: "3",
label: "Level One 3",
children: [
{
value: "3-1",
label: "Level Two 3-1",
children: [
{
value: "3-1-1",
label: "Level Three 3-1-1",
},
],
},
{
value: "3-2",
label: "Level Two 3-2",
children: [
{
value: "3-2-1",
label: "Level Three 3-2-1",
},
],
},
],
},
]
}
},
methods: {
filterMethod(value, data) {
return data.value.indexOf(value) !== -1;
}
}
}
</script>
:::
懒加载
树节点懒加载，更加适合于数据量大的列表。
:::demo
<el-tree-select
:props="props"
placeholder="Select"
v-model="value"
clearable
filterable
lazy
:filterMethod="filterMethod"
:load="loadNode"
node-key="id"
/>
<script>
export default {
data() {
return {
value: "",
props: {
label: "name",
children: "zones",
isLeaf: "leaf",
},
}
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([{ id: "0", name: "Trunk" }]);
}
if (node.level > 3) return resolve([]);
setTimeout(() => {
const data = [
{
id: `leaf-${node.level}`,
name: `Leaf ${node.level}`,
leaf: true,
},
{
id: `branch-${node.level}`,
name: `Branch ${node.level}`,
},
];
resolve(data);
}, 500);
},
filterMethod(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
}
}
</script>
:::
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值 | boolean / string / number | — | — |
| data | 展示数据 | array | — | — |
| multiple | 是否多选 | boolean | — | false |
| disabled | 是否禁用 | boolean | — | false |
| size | 输入框尺寸 | string | medium/small/mini | — |
| clearable | 是否可以清空选项 | boolean | — | false |
| collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false |
| name | tree-select input 的 name 属性 | string | — | — |
| placeholder | 占位符 | string | — | 请选择 |
| filterable | 是否可搜索 | boolean | — | false |
| empty-text | 内容为空的时候展示的文本 | String | — | — |
| node-key | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | String | — | — |
| props | 配置选项，具体看下表 | object | — | — |
| render-after-expand | 是否在第一次展开某个树节点后才渲染其子节点 | boolean | — | true |
| load | 加载子树数据的方法，仅当 lazy 属性为 true 时生效 | function(node, resolve) | — | — |
| default-expand-all | 是否默认展开所有节点 | boolean | — | false |
| auto-expand-parent | 展开子节点的时候是否自动展开父节点 | boolean | — | true |
| show-checkbox | 节点是否可被选择 | boolean | — | false |
| check-strictly | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false | boolean | — | false |
| filter-method | 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏 | Function(value, data, node) | — | — |
| accordion | 是否每次只打开一个同级树节点展开 | boolean | — | false |
| indent | 相邻级节点间的水平缩进，单位为像素 | number | — | 16 |
| lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false |
| popper-append-to-body | 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false | boolean | - | true |
props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 指定节点标签为节点对象的某个属性值 | string, function(data, node) | — | — |
| children | 指定子树为节点对象的某个属性值 | string | — | — |
| disabled | 指定节点选择框是否禁用为节点对象的某个属性值 | boolean, function(data, node) | — | — |
| isLeaf | 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效 | boolean, function(data, node) | — | — |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 选中值发生变化时触发 | 目前的选中值 |
| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
| remove-tag | 多选模式下移除 tag 时触发 | 移除的 tag 值 |
| clear | 可清空的单选模式下用户点击清空按钮时触发 | — |
| blur | 当 input 失去焦点时触发 | (event: Event) |
| focus | 当 input 获得焦点时触发 | (event: Event) |
Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| focus | 使 input 获取焦点 | - |
| blur | 使 input 失去焦点，并隐藏下拉框 | - |