element-ui 联级选择器

element-ui 的级联选择器是一个非常实用的组件，可以方便地实现多级联动选择。下面是一个简单的示例代码：

<el-cascader
  :options="options"
  v-model="selectedOptions"
  @change="handleChange"
></el-cascader>

export default {
  data() {
    return {
      options: [
        {
          value: 'zhinan',
          label: '指南',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则',
              children: [
                {
                  value: 'yizhi',
                  label: '一致'
                },
                {
                  value: 'fankui',
                  label: '反馈'
                },
                {
                  value: 'xiaolv',
                  label: '效率'
                },
                {
                  value: 'kekong',
                  label: '可控'
                }
              ]
            },
            {
              value: 'daohang',
              label: '导航',
              children: [
                {
                  value: 'cexiangdaohang',
                  label: '侧向导航'
                },
                {
                  value: 'dingbudaohang',
                  label: '顶部导航'
                }
              ]
            }
          ]
        }
      ],
      selectedOptions: []
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};

在这个示例中，我们定义了一个 `options` 数组，它包含了多个级别的选项。我们将这个数组传递给 `el-cascader` 组件的 `options` 属性，然后使用 `v-model` 指令将选中的值绑定到 `selectedOptions` 变量上。当用户选择一个新的值时，`@change` 事件会触发 `handleChange` 方法，我们可以在这个方法中处理选中的值。