获取到的后台数据
已有使用elementui的select选择器的实现代码
.vue文件
html部分代码
<el-select v-model="category" placeholder="请选择" size="mini" @change="handleCategory" :clearable="true">
<el-option v-for="(item,index) in categoryList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-select v-model="assistantCategory" placeholder="请选择" size="mini">
<el-option v-for="(item,index) in assistantList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
js部分代码
// 数据获取
getCategory(data).then(res => {
const result = res.data.filter(e => {
if (this.language === 'zh') {
return e.name === '帮助中心'
} else {
return e.name === 'Help'
}
})
this.categoryList = result[0].child
})
},
handleCategory(value) {
this.assistantCategory = null
this.assistantList = []
if (value) {
this.assistantList = this.categoryList.filter((e, i) => {
return e.id === value
})
this.assistantList = this.assistantList[0].child
}
}
}
已有显示效果
需要换成使用级联选择器
<el-cascader v-model="selectedOptions" :options="options" :key="isResourceShow" size="mini" clearable placeholder="请选择" @change="handleChange"></el-cascader>
let pList = []
for (var i = 0; i < this.categoryList.length; i++) {
let List = []
pList.push({ value: this.categoryList[i].id, label: this.categoryList[i].name, children: List })
for (var n = 0; n < this.categoryList[i].child.length; n++) {
List.push({ value: this.categoryList[i].child[n].id, label: this.categoryList[i].child[n].name })
}
}
this.disable = true
++this.isResourceShow // key用于解决elementui的报错
this.options = pList
利用字符串拼接,返回后台所需的数据格式
###按照官方文档里级联选择器支持的数据结构解析后台数据即可。