如何渲染级联选择器的数据
准备数据源
当然一般在工作中的数据源是后台接口返回的【大多是数组对象!】!我这个数据是直接从后台保存下来的!级联选择器数据源
上图
写代码了!
<template>
<div id="container">
<el-card>
<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
></el-cascader>
</el-card>
</div>
</template>
<script>
import { cityInfo } from './cityInfo'
export default {
name: 'index',
data() {
return {
options: {},
// value 主要是用来设置默认值的
value: [],
cityInfo: cityInfo
}
},
created() {
this.getCascaderData()
},
methods: {
getCascaderData: function() {
const info = cityInfo
this.options = info.map((v) => ({
value: v.adcode,
label: v.name,
children: v.districts.map((v2) => ({
value: v2.adcode,
label: v2.name,
children: v2.districts.map((v3) => ({
value: v3.adcode,
label: v3.name,
children: v3.districts.map((v4) => ({
value: v4.center,
label: v4.name
}))
}))
}))
}))
}
}
}
</script>
<style scoped>
</style>
效果很好!
文件我是直接放在当前的目录下面的!
参考文章: hellokitty小丸子
【投稿说明】
博客园是面向开发者的知识分享社区,不允许发布任何推广、广告、政治方面的内容。
博客园首页(即网站首页)只能发布原创的、高质量的、能让读者从中学到东西的内容。
如果博文质量不符合首页要求,会被工作人员移出首页,望理解。如有疑问,请联系contact@cnblogs.com。