ant desgin select 和checkbox混合使用 全选全不选

<template>
  <div>
    <a-select
      option-label-prop="label"
      v-model="selectedOptions"
      mode="multiple"
      placeholder="请选择"
      :width="180"
    >
      <a-select-option :disabled="true" :value="''" label="全部">
        <a-checkbox
          v-model="optionsAll"
          @change="handleoptionsAllChange"
        >
          全部
        </a-checkbox>
      </a-select-option>
      <a-select-option
        :value="item.index"
        :label="item.name"
        v-for="(item, index) in optionsData"
        :key="index"
        :disabled="true"
      >
        <a-checkbox
          v-model="item.check"
          @change="handleTaskItemChange(item)"
        >
          {{ item.name }}
        </a-checkbox>
      </a-select-option>
    </a-select>
  </div>
</template>
  
  <script>
export default {
  props: {
    options: {
      type: Array,
    },
  },
  data() {
    return {
      optionsData: [], //所有数据
      selectedOptions: [], //选中的的数据
      optionsAll: false, //控制全选
    };
  },
  watch: {
    options: {
      handler(newVal) {
        this.optionsData = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    handleoptionsAllChange(isAll) {
      if (isAll.target.checked) {
        this.selectedOptions = [];
        this.optionsData.forEach((elm, idx) => {
          elm.check = true;
          this.selectedOptions.push(elm.index);
        });
      } else {
        this.optionsData.forEach((elm, idx) => {
          elm.check = false;
        });
        this.selectedOptions = [];
      }
      this.$emit("selected", this.selectedOptions);
    },
    handleTaskItemChange(item) {
      // 这里是取出下标的方法，可以封装写出去
      Array.prototype.getArrayIndex = function (obj) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] === obj) {
            return i;
          }
        }
        return -1;
      };
      if (!item.check) {
        this.optionsData.forEach((elm, idx) => {
          if (item.index == elm.index) {
            let index = this.selectedOptions.getArrayIndex(item.index);
            if (index == -1) {
              return;
            }
            this.selectedOptions.splice(index, 1);
          }
        });
      } else {
        this.optionsData.forEach((elm, idx) => {
          if (item.index == elm.index) {
            this.selectedOptions.push(elm.index);
          }
        });
      }
      this.optionsAll = this.selectedOptions.length === this.optionsData.length;
      this.$emit("selected", this.selectedOptions);
    },
  },
};
</script>
  
  <style lang="less">
.ant-select {
  width: 180px;
  height: 30px;
}

.ant-select-selection--multiple .ant-select-selection__choice {
  background-color: none;
}
.ant-select-selection--multiple .ant-select-selection__choice__remove svg {
  display: none;
}
.ant-select-selection--multiple {
  flex-wrap: nowrap;
  overflow: hidden;
}
.anticon svg {
  display: none;
}
.ant-select-selection--multiple .ant-select-selection__choice {
  padding: 0 !important;
}
.ant-select-selection--multiple {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 30px;
}
.ant-select-selection--multiple .ant-select-selection__rendered {
  width: 160px;
}
.ant-checkbox-wrapper {
  width: 200px;
  height: 30px;
}
</style>
  

  

组件内应用   

<template>
  <div>
    <a-modal
      :title="getTitle"
      :width="600"
      :visible="visible"
      @cancel="handleCancel"
    >
      <div class="all_info">
        <div class="select_one">
          <span>生效范围：</span>
          <select-all :options="Data" @selected="selected" />
        </div>
      </div>
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 取消 </a-button>
        <a-button
          key="submit"
          @click="cancel_submit"
          type="primary"
          :loading="confirmLoading"
        >
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
  
<script>
import selectAll from "./selectAll.vue";
export default {
  props: {
    SpecialDay: {
      type: Array,
      default: 0,
    },
  },
  components: {
    selectAll,
  },
  data() {
    return {
      confirmLoading: false,
    };
  },
  computed: {
    getTitle() {
      return "批量设置价格";
    },
  },
  watch: {
    // 监听特殊日期
    SpecialDay: {
      handler(newVal, oldVal) {
        this.Data = [];
        if (newVal) {
          this.Data = JSON.parse(JSON.stringify(this.optionsData));
          let a = JSON.parse(JSON.stringify(newVal));
          let obj = {};
          // 将数组转化为对象
          for (let i = 0; i < a.length; i++) {
            obj[i] = a[i];
          }
          let newObj = Object.keys(obj).map((val, index) => ({
            name: obj[val],
            index: obj[val],
          }));
          newObj.map((item) => {
            console.log(item);
            if (item) {
              this.Data.push(item);
            }
          });
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    // 取消弹窗
    handleCancel() {
      this.$emit("cancel");
    },

    // 日期
    selected(value) {
      // console.log(value);
      let a = value.filter((item) => {
        return typeof item != "string";
      });
      let b = value.filter((item) => {
        return typeof item == "string";
      });
      this.selectIndex = a;
      this.selectSpecialDay = b;
    },
    // 场地
    selecteds(value) {
      this.area_id = value;
    },
    // 时间段
    selectedss(value) {
      this.time_slot = value;
    },
    // 确定时间
    cancel_submit() {
      this.$emit("cancel");
    },
  },
};
</script>
  <style lang="less">
.title_h1 {
  color: #333;
  font-size: 24px;
}
.all_info {
  margin-top: 20px;
  width: 550px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.select_one {
  width: 250px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
}
</style>
  

传的数据大体是这样的    我watch监听了一个特殊的日期    例如元旦这种的完整日期   对数组进行了重组

 days: [

        { name: "周一", index: 1 },

        { name: "周二", index: 2 },

        { name: "周三", index: 3 },

        { name: "周四", index: 4 },

        { name: "周五", index: 5 },

        { name: "周六", index: 6 },

        { name: "周日", index: 7 },

      ],