element的多级选中_elementUI级联选择器可以选择任意一级选项代码

下面是一个使用ElementUI级联选择器实现多级选中的示例代码：

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

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

在上面的示例代码中，el-cascader组件是ElementUI级联选择器组件，v-model指令用于双向绑定选中的选项，options属性用于指定可选的选项，props属性用于指定选项的value、label和children属性名。@change事件用于监听选中的选项变化，handleChange方法用于处理选中的选项。