(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-select
          v-model="ele.field"
          placeholder="选择字段"
          style="width: 430px;"
          multiple
          collapse-tags
          filterable
        >
          <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-option
              v-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-option
            v-for="item in rulesOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <i
          class="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 eqeqeq
		      if (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;
}