給ElementUI中的級聯選擇器設定預設值

級聯選擇器的資料來源

https://gitee.com/lvhanghmm/store-temporary-files/blob/master/bigFiles/級聯選擇器資料來源.js

最終程式碼

<template>
  <div id="container">
    <el-card>
      <el-cascader
        v-model="value"
        :options="options"
        :props="{ expandTrigger: 'hover' }"
        @change="handleChange"
      ></el-cascader>
    </el-card>
  </div>
</template>

<script>
import { cityInfo } from './cityInfo'
export default {
  name: 'index',
  data() {
    return {
      options: {},
      // value 主要是用來設定預設值的
      value: ['410000', '410300', '410324', '111.554,33.8397'],
      cityInfo: cityInfo
    }
  },
  created() {
    this.getCascaderData()
  },
  methods: {
    handleChange(node) {
      console.log(node)
    },
    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>

 

其實設定級聯選擇器的預設值最重要的就是elementUI官方提供的一個方法就是

呼叫他之後可以給我們返回回來一個數組，

把返回回來的陣列賦給我們繫結的變數就可以了!

這樣就搞定了!

本文來自部落格園，作者：lvhanghmm，轉載請註明原文連結：https://www.cnblogs.com/lvhanghmm/p/15263641.html