element-plus 实现级联互斥或下拉框互斥

首先你的项目需要已经安装element-plus

然后安装devecoui组件

npm install devecoui-plus

全部安装完成后在 src/main.js 中引用配置，示例如下：

import {createApp} from 'vue';
import App from './App.vue';
import router from './router';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';//必须引入
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';// 此处是element-plus汉化
import DevecoUI from "devecoui";//必须引入
import 'devecoui/dist/style.css';//必须引入

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(ElementPlus, {locale: zhCn});
app.use(DevecoUI);//必须引入
app.mount('#app');

！！！！！！！！！！！！！！！
需要特别注意：查看详情时通过接口获取到结果后，需要通过组件库自带的 devReplaceArrayData 方法进行赋值，或者使用官网示例中replaceArrayData 方法，避免计算属性监听不到造成无法互斥的问题。

级联互斥

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {devObjEstimation, devUseExtractSelected} from "devecoui-plus"

const options = ref([
  {
    "label": "植物界",
    "value": "plantae",
    "children": [
      {
        "label": "被子植物",
        "value": "angiosperms",
        "children": [
          {
            "label": "单子叶植物",
            "value": "monocots"
          },
          {
            "label": "双子叶植物",
            "value": "dicots"
          }
        ]
      },
      {
        "label": "裸子植物",
        "value": "gymnosperms",
        "children": [
          {
            "label": "松科",
            "value": "pinaceae"
          },
          {
            "label": "柏科",
            "value": "cupressaceae"
          }
        ]
      },
      {
        "label": "蕨类植物",
        "value": "ferns",
        "children": [
          {
            "label": "水龙骨科",
            "value": "polypodiaceae"
          },
          {
            "label": "蹄盖蕨科",
            "value": "dryopteridaceae"
          }
        ]
      }
    ]
  },
  {
    "label": "动物界",
    "value": "animalia",
    "children": [
      {
        "label": "哺乳动物",
        "value": "mammals",
        "children": [
          {
            "label": "食肉目",
            "value": "carnivores"
          },
          {
            "label": "偶蹄目",
            "value": "artiodactyla"
          }
        ]
      },
      {
        "label": "鸟类",
        "value": "birds",
        "children": [
          {
            "label": "猛禽",
            "value": "raptors"
          },
          {
            "label": "鸣禽",
            "value": "oscine"
          }
        ]
      },
      {
        "label": "爬行动物",
        "value": "reptiles",
        "children": [
          {
            "label": "蜥蜴",
            "value": "lizards"
          },
          {
            "label": "蛇",
            "value": "snakes"
          }
        ]
      }
    ]
  }
]);

const chooseAllData = ref([
  {
    label: '选项1',
    value: []
  },
  {
    label: '选项2',
    value: []
  },
  {
    label: '选项3',
    value: []
  }
])

const chooseLastData = ref([
  {
    label: '选项1',
    value: ''
  },
  {
    label: '选项2',
    value: ''
  },
  {
    label: '选项3',
    value: ''
  }
])

/**
 * 清空数组并替换为新数据
 * @param arr - 需要更新的数组
 * @param newData - 新的数据
 */
function replaceArrayData<T>(arr: T[], newData: T[]): void {
  // 清空原数组（移除所有元素）
  arr.splice(0, arr.length);

  // 将新的数据逐个推入原数组
  arr.push(...newData);
}


const optionsPath = ref<Record<string, any>>({})
const chooseAllValue = devUseExtractSelected(chooseAllData.value, 'value', false)
const chooseLastValue = devUseExtractSelected(chooseLastData.value, 'value', false)
onMounted(() => {
  optionsPath.value = devObjEstimation(options.value)
  // 模拟获取接口
  setTimeout(() => {
    replaceArrayData(chooseLastData.value, [
      {
        label: '选项1',
        value: 'monocots'
      },
      {
        label: '选项2',
        value: ''
      },
      {
        label: '选项3',
        value: ''
      }
    ])
  }, 2000)
})
</script>

<template>

  <el-card>
    <h3>绑定所有路径的值</h3>
    <div v-for="(item,index) in chooseAllData" :key="index">
      <h4>{{ item.label }}：{{ item.value }}</h4>
      <dev-cascader-mutex v-model="item.value"
                          :props="{multiple:false}"
                          :all-select-value="chooseAllValue"
                          :options-path="optionsPath"
                          :options="options"/>
    </div>
  </el-card>

  <el-card>
    <h3>只要最后一级选中的值</h3>
    <div v-for="(item,index) in chooseLastData" :key="index">
      <h4>{{ item.label }}：{{ item.value }}</h4>
      <dev-cascader-mutex v-model="item.value"
                          :props="{multiple:false,emitPath:false}"
                          :all-select-value="chooseLastValue"
                          :options-path="optionsPath"
                          :options="options"/>
    </div>
  </el-card>
</template>

详细的示例和文档可以前往级联互斥文档

下拉选择框互斥

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {DevSelectMutex, devUseExtractSelected} from "devecoui-plus";

const options = ref([
  {
    label: '选项1',
    value: '1'
  },
  {
    label: '选项2',
    value: '2'
  },
  {
    label: '选项3',
    value: '3'
  },
  {
    label: '选项4',
    value: '4'
  },
  {
    label: '选项5',
    value: '5'
  }
])

const list = ref([
  {
    label: '选项1',
    value: ''
  },
  {
    label: '选项2',
    value: ''
  },
  {
    label: '选项3',
    value: ''
  },
  {
    label: '选项4',
    value: ''
  },
  {
    label: '选项5',
    value: ''
  }
])

/**
 * 清空数组并替换为新数据
 * @param arr - 需要更新的数组
 * @param newData - 新的数据
 */
function replaceArrayData<T>(arr: T[], newData: T[]): void {
  // 清空原数组（移除所有元素）
  arr.splice(0, arr.length);

  // 将新的数据逐个推入原数组
  arr.push(...newData);
}

const allSelectValue = devUseExtractSelected(list.value, 'value', false);
onMounted(() => {
  // 模拟接口赋值
  setTimeout(() => {
    replaceArrayData(list.value, [
      {
        label: '选项1',
        value: '1'
      },
      {
        label: '选项2',
        value: ''
      },
      {
        label: '选项3',
        value: ''
      },
      {
        label: '选项4',
        value: ''
      },
      {
        label: '选项5',
        value: ''
      }
    ])
  }, 2000)
})
</script>

<template>
  <div v-for="(item,index) in list" :key="index">
    <p>选项{{ index + 1 }}：{{ item.value }}</p>
    <dev-select-mutex :all-select-value="allSelectValue" :options="options" v-model="item.value">
    </dev-select-mutex>
  </div>
</template>

详细的示例和文档可以前往下拉选择框文档
使用中的遇到问题，可以扫码进入沟通群询问。
devecoui所支持的能力不止这些，更多的功能文档有详细介绍！