el-cascader三级联动

el-cascader是一个基于Element UI的级联选择器组件，可以实现三级联动。在Vue组件中使用el-cascader组件，需要传入一个options数组，数组中每个元素都是一个对象，包含label和value两个属性，分别表示选项的显示文本和对应的值。当选择器的某一级选项发生变化时，会触发@change事件，可以在事件处理函数中获取当前选中的值。以下是一个简单的el-cascader三级联动的例子：

<template>
  <el-cascader
    v-model="value"
    :options="placeList"
    size="medium"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      placeList: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
              children: [
                {
                  value: 'zhongguancun',
                  label: '中关村',
                },
                {
                  value: 'wudaokou',
                  label: '五道口',
                },
              ],
            },
            {
              value: 'chaoyang',
              label: '朝阳区',
              children: [
                {
                  value: 'sanlitun',
                  label: '三里屯',
                },
                {
                  value: 'guomao',
                  label: '国贸',
                },
              ],
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'pudong',
              label: '浦东新区',
              children: [
                {
                  value: 'lujiazui',
                  label: '陆家嘴',
                },
                {
                  value: 'zhangjiang',
                  label: '张江',
                },
              ],
            },
            {
              value: 'xuhui',
              label: '徐汇区',
              children: [
                {
                  value: 'zhongshanpark',
                  label: '中山公园',
                },
                {
                  value: 'xujiahui',
                  label: '徐家汇',
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>