「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」。
一、功能依赖
- vue
- element ui
二、功能需求
已知一个数组【base_data】如下所示：
base_data: [
{
'label': '上装',
'children': [{ 'label': '短袖' }, { 'label': '衬衣' }, { 'label': '外套' }]
},
{
'label': '下装',
'children': [{ 'label': '短裤' }, { 'label': '长裤' }, { 'label': '短裙' }]
},
{
'label': '配饰',
'children': [{ 'label': '手表' }, { 'label': '项链' }, { 'label': '包包' }]
}
]
我们的需求是想要将其分组渲染到一个下拉框中，具体效果如图所示：
三、实现方式
要想实现以上效果，我们可以通过 element ui 中 Select 组件的分组展示功能来实现。其主要使用 el-option-group 对备选项进行分组，它的 label 属性为分组名，具体可参考 element ui 官网。在这里我们只需要将 【base_data 】重组成该组件所需的数据格式，再在页面上进行渲染即可。具体实现代码如下：
<template>
<div class="app-container">
<el-select
v-model="checkedTargetList"
multiple
:multiple-limit="2"
filterable
style="width:50%"
@change="checkedTargetChange"
>
<el-option-group
v-for="group in targetList"
:key="group.label"
:label="group.label"
>
<el-option
v-for="(item,index) in group.option"
:key="index"
:label="item"
:value="item"
/>
</el-option-group>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
// 源数据
base_data: [
{
'label': '上装',
'children': [{ 'label': '短袖' }, { 'label': '衬衣' }, { 'label': '外套' }]
},
{
'label': '下装',
'children': [{ 'label': '短裤' }, { 'label': '长裤' }, { 'label': '短裙' }]
},
{
'label': '配饰',
'children': [{ 'label': '手表' }, { 'label': '项链' }, { 'label': '包包' }]
}
],
checkedTargetList: [], // 被选中的备选项
targetList: []// select组件渲染所需的数据
}
},
created() {
// base_data 重组成 select 组件所需的格式
for (var index in this.base_data) {
this.targetList.push({
'label': this.base_data[index]['label'],
'option': []//重点
})
this.base_data[index]['children'].forEach(item => {
this.targetList[index].option.push(item.label)
})
}
},
methods: {
checkedTargetChange(val) {
console.log(val)
console.log(this.checkedTargetList)
}
}
}
</script>
四、总结
该功能的实现并不难，难的是对【base_data 】数据的处理，不熟悉的人可能就卡在这了。记录一下笔记!!!!
