如何渲染ElementUI中级联选择器的数据

如何渲染级联选择器的数据

准备数据源

当然一般在工作中的数据源是后台接口返回的【大多是数组对象!】！我这个数据是直接从后台保存下来的！级联选择器数据源
上图

写代码了！

直接粘贴级联选择器的代码在官网上！

<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。