vue elementui中多个select选择器公用一套选项option，且每个选项只能被选中一次

最新推荐文章于 2024-04-26 12:04:26 发布

荔枝要理智啊

最新推荐文章于 2024-04-26 12:04:26 发布

阅读量1k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_44738844/article/details/129255744

版权

vue elementui中多个select选择器公用一套选项option，且每个选项只能被选中一次

用于记录，也希望为写到这里堵塞住的朋友提供一点帮助，代码如下：
script标签内

data（）{
    return{
            fieldList: [],
            selectSourceOption: [], // 选中的源字段，其他下拉框无此字段
            selectTargerOption:[], // 选中的目标源字段，其他下拉框无此字段
            sourceFieldOption: [],// 源字段所有的选项
            targetFieldOption: [],// 目标源字段所有的选项

     }
}
// 初始化获取数据时记得保存已选中数据到数组中，即selectSourceOption或selectTargerOption里面
methods：{
   selectFieldOption(currentSelectValue,name) {
            // 筛选选中的从option里面剔除（核心代码），且区分源与目标源字段
            let remainingOption = []
            if (name == 'source') {
                // 源
                remainingOption = this.sourceFieldOption.filter(item=>{
                    return this.selectSourceOption.indexOf(item.name)==-1 || currentSelectValue == item.name
                })
                return remainingOption
            } else if (name == 'target') {
                // 目标源
                remainingOption = this.targetFieldOption.filter(item=>{
                    return this.selectTargerOption.indexOf(item.name)==-1 || currentSelectValue == item.name
                })
                return remainingOption
            }
        },

getSource (num,$event) {// 主要看4、8部分，将选中的数据放入数组中
            switch(num) {
                case 4: 
                this.selectSourceOption = []
                this.fieldList.forEach(item=>{
                    this.selectSourceOption.push(item.sourceField)
                })
                break;
                case 8: 
                this.selectTargerOption = []
                this.fieldList.forEach(item=>{
                    this.selectTargerOption.push(item.targetField)
                })
                break;
            }
        },
}

template标签内

<el-row v-for="(items,index) in fieldList" :key="index">
                <el-col :span="12">
                    <el-form-item label="源字段" v-if="showField">
                        <el-select v-model="items.sourceField" placeholder="请选择源" @change="getSource(4,$event)" :disabled="noEdit" clearable>
                                    <el-option :disabled="item.disabled" :label="item.name" :value="item.name" v-for="(item,i) in selectFieldOption(items.sourceField,'source')" :key="i"></el-option>
                                </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="目标源字段">
                        <el-select v-model="items.targetField" placeholder="请选择源" @change="getSource(8,$event)" clearable>
                            <el-option :disabled="item.disabled" :label="item.name" :value="item.name" v-for="(item,i) in selectFieldOption(items.targetField,'target')" :key="i"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-plus" @click="addField" v-if="index==0"></el-button>
                    <el-button icon="el-icon-minus" @click="deleteField(i)" v-else></el-button>
                </el-col>
            </el-row>