# SelectTree 下拉选择树
# 特性
- 使用 v-model 绑定选中标签的值
- 传入 data 即可渲染组件
- 支持下拉树模糊查询
- 支持仅叶子级可勾选
- 支持多选
- 基于 vue2 版本封装，强依赖于 element-ui
- 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx (opens new window))。
# 基本用法
通过 data 设置下拉树
<template>
<div>
<niuka-select-tree v-model="value" :data="data"></niuka-select-tree>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
data: [
{
id: 1,
label: '一级 2',
children: [
{
id: 3,
label: '二级 2-1',
children: [
{
id: 4,
label: '三级 3-1-1',
},
{
id: 5,
label: '三级 3-1-2',
disabled: true,
},
],
},
{
id: 2,
label: '二级 2-2',
disabled: true,
children: [
{
id: 6,
label: '三级 3-2-1',
},
{
id: 7,
label: '三级 3-2-2',
disabled: true,
},
],
},
],
},
],
};
},
};
</script>
隐藏源代码
# 节点过滤
通过设置 filterable 属性，开启模糊匹配
<template>
<div>
<niuka-select-tree
v-model="value"
:data="data"
filterable
></niuka-select-tree>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
data: [
{
id: 1,
label: '一级 2',
children: [
{
id: 3,
label: '二级 2-1',
children: [
{
id: 4,
label: '三级 3-1-1',
},
{
id: 5,
label: '三级 3-1-2',
disabled: true,
},
],
},
{
id: 2,
label: '二级 2-2',
disabled: true,
children: [
{
id: 6,
label: '三级 3-2-1',
},
{
id: 7,
label: '三级 3-2-2',
disabled: true,
},
],
},
],
},
],
};
},
};
</script>
隐藏源代码
# 多选
通过设置 multiple 属性，即可启用多选，此时 v-model 的值为当前选中值所组成的数组。
<template>
<div>
<niuka-select-tree
v-model="value"
:data="data"
multiple
></niuka-select-tree>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
data: [
{
id: 1,
label: '一级 2',
children: [
{
id: 3,
label: '二级 2-1',
children: [
{
id: 4,
label: '三级 3-1-1',
},
{
id: 5,
label: '三级 3-1-2',
disabled: true,
},
],
},
{
id: 2,
label: '二级 2-2',
disabled: true,
children: [
{
id: 6,
label: '三级 3-2-1',
},
{
id: 7,
label: '三级 3-2-2',
disabled: true,
},
],
},
],
},
],
};
},
};
</script>
隐藏源代码
# 仅叶子级可选
设置 select-leaf 属性，所有带子级的节点无法选择，仅最后一级的节点可选
<template>
<div>
<niuka-select-tree
v-model="value"
:data="data"
select-leaf
></niuka-select-tree>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
data: [
{
id: 1,
label: '一级 2',
children: [
{
id: 3,
label: '二级 2-1',
children: [
{
id: 4,
label: '三级 3-1-1',
},
{
id: 5,
label: '三级 3-1-2',
disabled: true,
},
],
},
{
id: 2,
label: '二级 2-2',
disabled: true,
children: [
{
id: 6,
label: '三级 3-2-1',
},
{
id: 7,
label: '三级 3-2-2',
disabled: true,
},
],
},
],
},
],
};
},
};
</script>
隐藏源代码
# 插槽
内置 before 和 after 两个插槽，可以在选项树之前/后添加自定选项
<template>
<div>
<niuka-select-tree v-model="value" :data="data">
<template slot="before">
<el-option label="前置插槽" value="before"></el-option>
</template>
<template slot="after">
<el-option label="后置插槽" value="after"></el-option>
</template>
</niuka-select-tree>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
data: [
{
id: 1,
label: '一级 2',
children: [
{
id: 3,
label: '二级 2-1',
children: [
{
id: 4,
label: '三级 3-1-1',
},
{
id: 5,
label: '三级 3-1-2',
disabled: true,
},
],
},
{
id: 2,
label: '二级 2-2',
disabled: true,
children: [
{
id: 6,
label: '三级 3-2-1',
},
{
id: 7,
label: '三级 3-2-2',
disabled: true,
},
],
},
],
},
],
};
},
};
</script>
隐藏源代码