tm-treeSelect 分类选择
🎉目录导航
👉使用方法,跟数1,2,3一样简单
基本示例
<tm-treeSelect :list="list"></tm-treeSelect>
1
<script>
export default {
data() {
return {
list:[
{
title:'苏州',
id:1,
children:[
{title:'苏州',id:2,},
{title:'苏州',id:3,},
{title:'苏州',id:4,}
]
},
{
title:'水果',
id:5,
children:[
{title:'苹果',id:6,checked:true},
{title:'香蕉',id:7,},
{title:'梨子',id:8,}
]
},
]
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
默认选中的小技巧
可以通过props default-selected来设置默认选中项，它的格式最大化放开你的双手
可以是id,数组，也可以是默认选择的对象数组，但必需要包含唯一标识的id字段即。而且还可以格式混着搞！！！
具体看如下示例:
<tm-treeSelect
:default-selected="defaultSelec"
:dot="true"
:list="list"></tm-treeSelect>
1
2
3
4
2
3
4
<script>
export default {
data() {
return {
// 默认选中了id为 2,3,6,8的选项。
defaultSelec:[2,3,6,{id:8}],
list2:[
{
title:'苏州苏州',
id:1,
children:[
{title:'苏州苏州',id:2,},
{title:'苏州',id:3,},
{title:'苏州',id:4,}
]
},
{
title:'水果',
id:5,
disabled:true,
children:[
{title:'苹果',id:6,},
{title:'香蕉',id:7,},
{title:'梨子',id:8,}
]
},
]
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
👉完整的示例
可以复制到页面直接运行
<template>
<view>
<tm-menubars title="分类选择" color="bg-gradient-blue-accent" :showback="true"></tm-menubars>
<tm-sheet>
<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">基础示例</view>
<tm-treeSelect :default-selected="defaultSelec" :dot="true" height="250" :list="list"></tm-treeSelect>
</tm-sheet>
<tm-sheet>
<view class="pa-12 text-size-s text-weight-b blue text mb-32 ">其它颜色，禁用选项,不显示选中数量</view>
<tm-treeSelect color="red" height="250" :list="list2"></tm-treeSelect>
</tm-sheet>
<tm-sheet black>
<view class="pa-12 text-size-s text-weight-b text mb-32 bk">暗黑模式</view>
<tm-treeSelect :dot="true" black color="green" :list="list"></tm-treeSelect>
</tm-sheet>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
export default {
data() {
return {
defaultSelec:[2,3,6,{id:8}],
list2:[
{
title:'苏州苏州',
id:1,
children:[
{title:'苏州苏州',id:2,},
{title:'苏州',id:3,},
{title:'苏州',id:4,}
]
},
{
title:'水果',
id:5,
disabled:true,
children:[
{title:'苹果',id:6,},
{title:'香蕉',id:7,},
{title:'梨子',id:8,}
]
},
],
list:[
{
title:'苏州',
id:1,
children:[
{title:'苏州',id:2,},
{title:'苏州',id:3,},
{title:'苏州',id:4,}
]
},
{
title:'水果',
id:5,
children:[
{title:'苹果',id:6,checked:true},
{title:'香蕉',id:7,},
{title:'梨子',id:8,}
]
},
]
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| height | Number | 任意数字 | 0，父组件的高度 | 单位upx,自动使用父组件的高度 |
| default-selected | Array | - | [] | 默认选中的项目，可以是id索引也可以是对象数组,可以混着来。[1],或者[{id:1},8] |
| rang-key | String | - | title | 数据结构对象中，需要展示标签的key，比如list中[{text:"水果",id:1}],那么rangKey='text' |
| max | Number | 任意数字 | 999 | 每一个分类最大选择数量，1可以实现单选。【并非所有分类 】 |
| color | String | 任意主题色名 | primary | 主题色名 |
| bg-color | String | 任意主题色名 | grey-lighten-5 | 未选择时的背景色 |
| font-color | String | 任意主题色名 | grey-darken-1 | 未选中时的文字颜色 |
| text | Boolean | true/false | false | 使用主题文本色为高亮色 |
| black | Boolean | true/false | false | 是否暗黑模式 |
| dot | Boolean | true/false | false | 是否显示角标数字,当前选中的数量。 |
| list | Array | [] | [] | 数据列表,结构见下方，只要是对象即可。 |
下面是解释rang-key和list数据结构的关系
[
{
title:'苏州', //标题，必须， rang-key默认为title
id:1 , //唯一 标识符，必须
disabled:true, //是否禁用选项 ,[可选字段，可以不出现此字段.]，这个地址出现true,意味着它的children所有子项被禁用。
children:[ //子项选择项目。
{title:'苏州苏州',id:2,disabled:true},//单位个禁用选择
{title:'苏州',id:3,},
{title:'苏州',id:4,}
]
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @children-change | 返回选中的数据 | Object | 选中单个选项时触发 |
| @change | 返回当前类目和所有类目选中的数据 | Object | 每次选择变化都会触发 |
👉更新日志
2021年8月20日14:8:5 初始版本。