可多选,选择全部时不可选择其他,选择其他不可选择全部
选择全部,不可选择其他条件
选择其他条件时,不可选择全部 思路
- 先把select插件写好
- 当下拉框的值变化的时候 ,实现数据的监听,来判断是否选择了全部或者没选择全部
- 然后根据共用部分,封装一个方法,只需要传改变的值和他对应data里面的下标
<template> <div class="Condition"> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item :label="item.label" v-for="(item, index) in formlist" :key="index" > <el-select v-model="formInline[item.model]" placeholder="请选择" multiple collapse-tags > <el-option v-for="i in item.options" :key="i.label" :label="i.label" :value="i.value" :disabled="i.disabled" > </el-option> </el-select> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { formInline: { kequn: ["0"], //默认值 客群选择是全部代发 DFPLLX: ["0"], //默认值 代发频率类型为全部代发 }, formlist: [ { label: "客群", model: "kequn", options: [ { label: "全部代发", value: "0", }, { label: "存量代发", value: "1", }, { label: "新增代发", value: "2", }, ], }, { label: "代发频率类型", model: "DFPLLX", options: [ { label: "全部代发", value: "0", }, { label: "固定代发", value: "1", }, { label: "间歇代发", value: "2", }, { label: "一次代发", value: "3", }, ], }, ], }; }, methods: { changeSelect(newVal, index) { //newVal 为条件变更后监听的值,index为当前数据在定义数据的下标 // 如果全选 if (newVal.includes("0")) { //如果变更后的值选择了全部代发 this.formlist[index]["options"].forEach((item) => { //不让其他的选项选择 if (item.label !== "全部代发") { item.disabled = true; } }); } else { // 如果没有选择全部代发 ,先初始化为都可以选择 this.formlist[index]["options"].forEach((item) => { item.disabled = false; // 如果选择并且没有选择全部代发,就把全部代发设置为禁用 if (newVal.length > 0 && !newVal.includes("0")) { if (item.label == "全部代发") { item.disabled = true; } } }); } }, }, watch: { formInline: { handler(newVal) { const { kequn, DFPLLX } = newVal; this.changeSelect(kequn, 0); //客群 this.changeSelect(DFPLLX, 1); //代发频率类型 }, immediate: true, deep: true, }, }, };