vue+element el-select动态加减框数量及验证下拉框选项动态置灰(选中行的下拉框换个值后,原值没办法监控这个问题也解决了)

本文主要是介绍vue+element el-select动态加减框数量及验证下拉框选项动态置灰(选中行的下拉框换个值后,原值没办法监控这个问题也解决了)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1效果:

2部分主要(HTML):

1:这个位置主要就是看看方法什么的吧,还有大概的结构

2:@change="sort_Change(item,tablelists.orderbyList)这两个参数(都有大用):

(1)item:代表每次你操作的这个数据

(2)tablelists.orderbyList:代表你这一共有几行数据(上边这个例子就会得到一个数组包4个对象)

<el-form-item prop="name" label=""><el-row><el-col :span="20" style="display:flex"><el-select v-model="item.name" class="borputsel" style="width:19%" @change="sort_Change(item,tablelists.orderbyList)">   <!-- 这个位置就是看看方法什么的吧 --><el-optionv-for="fieldNameListitem in fieldNameLists":key="fieldNameListitem.name":label="fieldNameListitem.name":value="fieldNameListitem.name":disabled="fieldNameListitem.disabled"></el-option></el-select><el-select v-model="item.value" class="sort_class" style="width:100%"><el-optionv-for="item in sort_radio":key="item.value":label="item.name":value="item.value"></el-option></el-select></el-col><el-col :span="3"><el-buttonv-if="index === 0"type="text"icon="el-icon-document-add"class="icon"@click="addNum_sort(tablelists.orderbyList)"></el-button>  <!-- 这是添加的按钮 --><el-buttontype="text"icon="el-icon-delete"class="icon"@click="delNum_sort(tablelists.orderbyList, index)"></el-button>  <!-- 这是删除的按钮 --></el-col></el-row></el-form-item>

3方法:

3-1: 下拉框的change方法:(这个好难,写了一天才把逻辑捋顺,那家伙各种尝试呀,最终还是选择了最笨的办法,不过也是最好理解的,注释也都有仔细看看就理解了)

 sort_Change(item,itemList) {var itemList_copy = []itemList.forEach(item=>{itemList_copy.push(item.name)          //定义空数组后把所有选中的(值的name)放到这里边 , 每次进来都是从新循环进去所以每次都只有 选中的几项  为了解决同样条数换select值的问题})if (item.name) {item.value = 'ASC'                  //设 "排序" 默认值用的 (前边选了 对应的后边默认填一个)this.fieldNameLists.forEach((items, index) => {if (itemList_copy.includes(items.name)) {      //循环下拉框数组  把选中行的值添加disabled置灰(下次不可再选,避免出现重复)items.disabled = true}else{delete items.disabled                         //没选中的 或换下来的选项 disabled 解除}})} else {item.value = ''         //刚打开的时候什么都没选  不用设默认值}},

3-2 添加删除方法:(之所以放一起是因为,添加很简单就一行,删除复杂点但也不难)

 // 新增addNum_sort(item) {item.push({ name: '', value: '' })},// 删除delNum_sort(item, index) {this.fieldNameLists.forEach(items => {if (items.name === item[index].name) { delete items.disabled } //把删除的这一条  在 下拉框中 disabled 解除})if (index === 0 && item.length === 1) {     item.splice(index, 1, { name: '', value: '' })     //如果只有一条的时候  只把值清空  不把 本条框框删除} else {item.splice(index, 1)            //正常的页面删除}},

这次的东西可不是直接搬过去就能用了,需要理解着搬 (不过注释还是标的挺明白的 ,仔细看看吧,别着急)

4 赠送篇:

初始的数据结构大概长这样(因为这个页面正常一打开,最少也得有一行吧而且数据是空的,要不怎么++出第二第三行呀)