级联

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

<script>
export default {
  data() {
    return {
      selectedOptions: [], // 用于存储选中的选项
      options: [
        {
          value: "1",
          label: "一级 1",
          children: [
            {
              value: "1-1",
              label: "二级 1-1",
              children: [
                {
                  value: "1-1-1",
                  label: "三级 1-1-1",
                },
                {
                  value: "1-1-2",
                  label: "三级 1-1-2",
                },
                {
                  value: "1-1-3",
                  label: "三级 1-1-3",
                },
              ],
            },
            {
              value: "1-2",
              label: "二级 1-2",
              children: [
                {
                  value: "1-2-1",
                  label: "三级 1-2-1",
                },
                {
                  value: "1-2-2",
                  label: "三级 1-2-2",
                },
                {
                  value: "1-2-3",
                  label: "三级 1-2-3",
                },
              ],
            },
          ],
        },
        {
          value: "2",
          label: "一级 2",
          children: [
            {
              value: "2-1",
              label: "二级 2-1",
              children: [
                {
                  value: "2-1-1",
                  label: "三级 2-1-1",
                },
                {
                  value: "2-1-2",
                  label: "三级 2-1-2",
                },
                {
                  value: "2-1-3",
                  label: "三级 2-1-3",
                },
              ],
            },
            {
              value: "2-2",
              label: "二级 2-2",
              children: [
                {
                  value: "2-2-1",
                  label: "三级 2-2-1",
                },
                {
                  value: "2-2-2",
                  label: "三级 2-2-2",
                },
                {
                  value: "2-2-3",
                  label: "三级 2-2-3",
                },
              ],
            },
          ],
        },
      ],
      cascaderProps: {
        multiple: true,
        checkStrictly: true,
        emitPath: false, // 禁用触发change事件时传递完整路径
      },
    };
  },
  methods: {
    handleChange(value) {
      // 在change事件中处理选中的选项
      console.log(value);
    },
  },
};
</script>