vue+elementui 多级多选穿梭框（常用于省市区三级联动）

在Vue中使用Element UI实现多级多选穿梭框，可以通过el-cascader组件来实现。以下是一个简单的例子：

<template>
  <el-cascader
    v-model="selectedOptions"
    :options="options"
    :props="{ multiple: true, checkStrictly: true }"
    @change="handleChange"
    clearable
  ></el-cascader>
</template>
 
<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: [
        {
          value: 'guid1',
          label: '省份A',
          children: [
            {
              value: 'guid2',
              label: '城市B',
              children: [
                { value: 'guid3', label: '区域C' },
                { value: 'guid4', label: '区域D' }
              ]
            },
            {
              value: 'guid5',
              label: '城市E',
              children: [
                { value: 'guid6', label: '区域F' },
                { value: 'guid7', label: '区域G' }
              ]
            }
          ]
        },
        // ... 可以添加更多省份和城市
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

在这个例子中，el-cascader组件被用来创建多级多选穿梭框。v-model绑定了selectedOptions数组，它将保存选中的值。options是一个嵌套的对象结构，代表了省市区的层级关系。props属性中的multiple设置为true启用多选，checkStrictly设置为true确保可以选中所有级别的选项。

当选项变化时，handleChange方法会被触发，你可以在这个方法中处理选中值的逻辑。