一个全选、反选、选中的前端组件

可以实现全选，反选，正选，下拉框可以实现搜索

直接上图：

①全选

②反选

③选中

<el-form-item label="国家/地区：">
    <div class="clOaTanBao">
      <div v-if="showFan" class="cl2">排除：</div>
      <div v-if="showRel" class="cl2">选中：</div>
      <div class="baoJaCl" :title="natStrDt" @click="cliDivFunc">
        <el-input @focus="inptFocusFunc" @blur="inptOutFunc" v-model="natStrDt" class="clshowOa" placeholder="全部" />
        <span class="clJaXia" v-show="!natTanShow">
          <i class="el-icon-arrow-down"></i>
        </span>
        <span class="clJaXia" v-show="natTanShow">
          <i class="el-icon-arrow-up"></i>
        </span>
      </div>
      
      <div class="clTan" v-show="natTanShow">
        <div :tabIndex="1" @focus="textFocusFunc2" @blur="textOutFunc2" class="ciDaCl">
          <el-input @input="queryNatFunc" @focus="textFocusFunc1" @blur="textOutFunc1" v-model="piNatDt" />
          <div class="xunBigCl">
            <div v-for="city in ccListArr" :key="city.mccid">
              <div @click="selNatFunc(city.mccid)" v-bind:class='{bg:selIdArr.includes(city.mccid, 0)}'>
                <span>{{city.name}}</span>
                <span class="rigSpCl" v-show="selIdArr.includes(city.mccid, 0)">
                  <i class="el-icon-check"></i>
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="cl3">
          <MwButton @click="selAllFunc">全选</MwButton>
          <MwButton @click="selFanFunc" class="clBtnHou">反选</MwButton>
          <MwButton @click="selRelFunc" class="clBtnHou">选中项</MwButton>
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<script>
  export default {
    name: 'mw-cc-mulselect',

    props: {
      phoneNum: {
        type: Boolean,
        default: true,
      },
      //绑定值
      bindKey: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        selIdArr: [],
        isactive: "",
        showRel: false,
        showFan: false,
        natTanShow: false,
        divAreJu: false,
        ipt2AreJu: false,
        natStrDt: "",
        piNatDt: "",
        ccListArr: [
          {
            mccid: "1",
            name: "中国"
          },
          {
            mccid: "2",
            name: "韩国"
          },
          {
            mccid: "3",
            name: "日本"
          },
          {
            mccid: "4",
            name: "俄罗斯"
          },
          {
            mccid: "5",
            name: "美国"
          }
        ],
        ccListAllArr: [],
        numFlag: 0
      }
    },

    created() {
      this.ccListAllArr = this.$cloneDeep(this.ccListArr);
    },

    watch: {
      "$store.getters.getMulNatStat": {
        handler(newName, oldName) {
          if (newName == "false") {
            this.natTanShow = false;
            this.numFlag = 0;
          }
        },
        immediate: true,
      },
    },

    methods: {
      cliDivFunc() {
        this.numFlag = this.numFlag + 1;
        if (this.numFlag==1) {
          this.natTanShow = true;
        }
        if (this.numFlag==2) {
          this.natTanShow = false;
          this.numFlag = 0;
        }
      },

      selNatFunc(prmsDt) {
        if (!this.selIdArr.includes(prmsDt, 0)) {
          this.selIdArr.push(prmsDt);
        } else {
          for (let i=0; i<this.selIdArr.length; i++) {
            if (prmsDt == this.selIdArr[i]) {
              this.selIdArr.splice(i, 1);
              break;
            }
          }
        }
      },

      //搜索国家地区
      queryNatFunc() {
        this.ccListArr = this.ccListAllArr.filter((item, index, arr) => {
            return item.name.indexOf(this.piNatDt) > -1;
        })
      },

      //国家地区聚焦
      inptFocusFunc() {
        this.natTanShow = true;
        this.piNatDt = "";
        this.$store.commit('zidstore/SETMUL_OACLOSE', "false");
        this.queryNatFunc();
      },

      //国家地区失焦
      inptOutFunc() {
        setTimeout(() => {
          if (this.divAreJu || this.ipt2AreJu) {
          } else {
            this.natTanShow = false;
            this.numFlag = 0;
          }
        }, 200);
        setTimeout(() => {
          this.divAreJu = false;
          this.ipt2AreJu = false;
        }, 250);
      },

      //输入框2聚焦
      textFocusFunc1() {
        this.ipt2AreJu = true;
      },

      //输入框2失焦
      textOutFunc1() {
        setTimeout(() => {
          if (this.divAreJu) {
          } else {
            this.natTanShow = false;
            this.numFlag = 0;
          }
        }, 200);
      },

      //选国家div聚焦
      textFocusFunc2() {
        this.divAreJu = true;
      },

      //选国家div失焦
      textOutFunc2() {
        setTimeout(() => {
          if (this.ipt2AreJu) {
          } else {
            this.natTanShow = false;
            this.numFlag = 0;
          }
        }, 200);
      },

      testFunc2() {
        
      },

      //全选
      selAllFunc() {
        this.showRel = false;
        this.showFan = false;
        this.natTanShow = false;
        this.numFlag = 0;
        this.selIdArr = [];
        this.natStrDt = "";
        this.$emit('chageFlag', "AllFlag");
        this.$store.commit('zidstore/SETMUL_OACLOSE', "");
      },

      //反选
      selFanFunc() {
        if (this.selIdArr.length == 0) {
          this.$message({
            type: "warning",
            message: "请先选择",
          });
        } else {
          this.showRel = false;
          this.showFan = true;
          this.natTanShow = false;
          this.numFlag = 0;
          this.natComFunc();
          this.$emit('chageFlag', "fanFlag");
          this.$store.commit('zidstore/SETMUL_OACLOSE', "");
        }
      },

      //选中
      selRelFunc() {
        if (this.selIdArr.length == 0) {
          this.$message({
            type: "warning",
            message: "请先选择",
          });
        } else {
          this.showRel = true;
          this.showFan = false;
          this.natTanShow = false;
          this.numFlag = 0;
          this.natComFunc();
          this.$emit('chageFlag', "RelFlag");
          this.$store.commit('zidstore/SETMUL_OACLOSE', "");
        }
      },

      //国家地区选中公共
      natComFunc() {
        let temArr1 = [];
        for (let i = 0; i < this.selIdArr.length; i++) {
          for (let j = 0; j < this.ccListArr.length; j++) {
            if (this.selIdArr[i] == this.ccListArr[j].mccid) {
              temArr1.push(this.ccListArr[j].name);
            }
          }
        }
        this.natStrDt = "";
        for (let i = 0; i < temArr1.length; i++) {
          this.natStrDt = this.natStrDt + ";" + temArr1[i];
        }
        this.natStrDt = this.natStrDt.substring(1);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .baoJaCl {
    /deep/.el-input__inner {
      cursor: pointer;
      padding-right: 30px;
    }
  }

  .clJaXia {
    position: absolute;
    right: 10px;
    color: #C0C4CC;
  }

  .xunBigCl {
    cursor: pointer;
    max-height: 250px;
    overflow-y: auto;
  }

  .ciDaCl {
    padding: 0 20px;
  }

  .rigSpCl {
    float: right;
  }

  .bg {
    color: #409eff;
  }

  .clOaTanBao {
    .clshowOa {
      /deep/.el-input__inner {
        padding-left: 35px;
      }
    }
  }

  .cl2 {
    position: absolute;
    z-index: 9999;
  }

  .cl3 {
    position: absolute;
    width: 235px;
    background: #fff;

    .clBtnHou {
      margin-left: 26px;
    }
  }

  .clTan {
    position: fixed;
    z-index: 999;
    width: 235px;
    margin-top: 5px;
    background: #fff;

    .el-checkbox {
      display: block;
    }

    .el-checkbox-group {
      max-height: 250px;
      overflow-y: scroll;
    }
  }
</style>

洽西游戏网

洽西游戏http://www.qiaxi.cc