(vue)给循环遍历的el-select选择框加全选/清空/反选，禁选，添加行移除行功能

(vue)给循环遍历的el-select选择框加全选/清空/反选，禁选，添加行移除行功能

---

功能1：字段下拉框添加全选/清空/反选

功能2：规则下拉框实现选过的项添加禁选

功能3：实现添加行，移除行

---

html

<!-- 规则 -->
<div><el-form-item label="选择数据处理规则：" /><el-form-item><div v-for="(ele,i) of ruleArr" :key="i" style="margin-left:-10px"><el-form-item><el-selectv-model="ele.field"placeholder="选择字段"style="width: 430px;"multiplecollapse-tagsfilterable><div class="select_up"><el-button type="text" @click="selectAllRule(ele.field,i)"><i class="el-icon-document-checked" />全选</el-button><el-button type="text" @click="removeTagRule(ele.field,i)"><i class="el-icon-document-delete" />清空</el-button><el-button type="text" @click="selectReverseRule(ele.field,i)"><i class="el-icon-document-copy" />反选</el-button></div><div class="select_list"><el-optionv-for="(item,index) in ruleFiledOption":key="index":label="item":value="item"/></div></el-select></el-form-item><el-form-item><el-select v-model="ele.rule" placeholder="选择规则" clearable @change="rulesChange"><el-optionv-for="item in rulesOptions":key="item.id":label="item.name":value="item.id":disabled="item.disabled"/></el-select></el-form-item><el-form-item><iclass="el-icon-circle-plus-outline"style="margin:0 20px;"@click="ruleAddBtn"/><i class="el-icon-remove-outline" @click="ruleDelParam(ele, i)" /></el-form-item></div></el-form-item>
</div>

js

<script>
export default {//声明data() {return {// 规则赋值ruleFiledOption: [],ruleArr: [{ field: [], rule: '' }],}},//方法methods: {// 1.字段清空操作removeTagRule(val, i) {this.ruleArr[i].field = []},// 1.字段全选操作selectAllRule(val, i) {this.ruleArr[i].field = []this.ruleFiledOption.map(item => {this.ruleArr[i].field.push(item)})},// 1.字段反选操作selectReverseRule(val, i) {this.ruleFiledOption.map(item => {const index = this.ruleArr[i].field.indexOf(item)// 判断现有选中数据是否包含如果不包含则进行反选数据if (index !== -1) {this.ruleArr[i].field.splice(index, 1)} else {this.ruleArr[i].field.push(item)}})},// 2.规则禁选rulesChange() {// 1.将已勾选的整合到一个数组中const targetStr = []this.formInline.rule.forEach(e => {targetStr.push(e.rule)})// 2.遍历下拉列表和已选择的数组，若列表中的id与已勾选的值相等则添加禁选this.rulesOptions.forEach((item) => {targetStr.forEach((ele) => {// 下边一行意思为清除eslint校验// eslint-disable-next-line eqeqeqif (item.id == ele) {this.$set(item, 'disabled', true)}})})},// 3.添加行ruleAddBtn() {this.ruleArr.push({field: '',rule: ''})},// 3.移除行ruleDelParam(row, index) {if (this.ruleArr.length > 1) {this.ruleArr.splice(index, 1)} else if (this.ruleArr.length === 1) {this.$message.warning({message: '此类不允许删除',type: 'warning'})}},}
}
</script>

css

.select_up {padding: 0 12px;font-size: 14px;position: absolute;z-index: 99999;background-color: white;top: 0px;width: 100%;border-radius: 5px 5px 0 0;::v-deep .el-button {color: #bcbcbc;font-size: 14px;i {font-size: 14px;}}::v-deep .el-button:hover {color: #409EFF;}::v-deep .el-button:focus {color: #409EFF;}.el-button+.el-button {margin-left: 6px;}
}.select_list {margin-top: 25px;
}