elementUI级联选择器如何使用后台的数据字段替换option里面的lable和value

---

链接：elementUI级联选择器如何使用自己的方法数据字段，解决方法从这篇链接里面找到的（）

---

学无止境，他的数据结构出了点问题（只是child里面少了大括号这样的问题），我整了一份完整的，随拷随用

<template>
  <div id="publish">
    <el-cascader
      :options="cityList" 
      :props="{
        expandTrigger: 'hover',
        value: 'id',
        label: 'name',
        children: 'child',
      }"
      :expandTrigger="hover"
      v-model="selectedOptions"
      @change="handleChange"
    >
    </el-cascader>
  </div>
</template>

<script>
export default {
  name: "Publish",// 瞎写的，没什么卵用
  data() {
    return {
      cityList: [ // 从后台接收的数据，这边为了方便直接自定义了
        {
          id: 1,
          name: "北京",
          child: [
            {
              id: 11,
              name: "大兴区",
              child: [
                {
                  id: 111,
                  name: "亦庄",
                },
              ],
            },
          ],
        },
      ],
      /*
     
      // 为了把后台数据转化成级联选择器可以识别的样子,
      // 这个是因为如果：props不写成下面这种形式的话
      // :props="{
      //  expandTrigger: 'hover',
      //  value: 'id',
      //  label: 'name',
      //  children: 'child',
      // }"
      // 可以写成这种形式——:props="optionProps"这样的
       optionProps: { 
        value: "id",
        label: "name",
        children: "child",
      },
      */
      selectedOptions: "",// v-model绑定的值
    };
  },
  created() {
    console.log(this.cityList[0].child);
    // 为了看看能不能只把后台传过来的数据放进child里面，
    // 打算把一级写死，二级才放从后台传过来的内容
  },

  methods: {
    handleChange(value) {// 这个方法可有可无--跟上面的
    // @change="handleChange"相对应，就是elementUI里面的方法，
    // 跟这个博客的解决方法无关，只是方便拷贝代码的时候拷贝完整一套
      console.log(value);
      console.log(this.cityList[0].child);
    },
  },
};
</script>