bigDataStudent/src/views/userInfo/adminInfo/SelectChecked.vue

<template>
    <div class="select-checked">
      <!-- 下拉加多选框 -->
      <el-select
        v-model="value"
        multiple
        collapse-tags
        placeholder="请选择"
        :popper-append-to-body="false"
        @remove-tag="removeTag"
        size="small"
        style="width:384px;"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <el-checkbox v-model="item.check" @change="isCheck(item)">
            {{ item.label }}
          </el-checkbox>
        </el-option>
      </el-select>
      <!-- {{ value }} -->
    </div>
  </template>
   
  <script>
  export default {
    name: 'SelectChecked',
    components: {},
    props: {
      options: {
        type: Array
      }
    },
    data() {
      return {
        value: []
      }
    },
    watch:{
      options:{
        handler(newVal) {
          const allChecked = newVal.every(option => option.value == 'all' || option.check);
          const allOption = newVal.find(option => option.value == 'all');

          if (allOption) {
            allOption.check = allChecked;
          }
        },
        deep: true // 深度监听数组的内部对象变化
      }
    },
    methods: {
      // 多选框触发
      isCheck(item) {
        if (item.check && item.value == 'all') {
          this.value = []
          this.options.forEach(element => {
            element.check = true
            this.value.push(element.value)
          })
        } else if (!item.check && item.value == 'all') {
          this.value = []
          this.options.forEach(element => {
            element.check = false
          })
        }
        if (
          item.check &&
          this.value.indexOf(item.value) == -1 &&
          item.value !== 'all'
        ) {
          this.value.forEach((elm, idx) => {
            if (elm == 'all') {
              this.value.splice(idx, 1)
            }
          })
          this.value.push(item.value)
          if (this.value.length == this.options.length - 1) {
            this.options[0].check = true
            this.value.unshift('all')
          } else {
            this.options[0].check = false
          }
        } else if (!item.check && item.value !== 'all') {
          this.options[0].check = false
          this.value.forEach((elm, idx) => {
            if (elm == item.value || elm == 'all') {
              this.value.splice(idx, 1)
            }
          })
        }
        this.$emit('selectedVal', this.value)
      },
      // 多选模式下移除tag时触发
      removeTag(value) {
        if (value == 'all') {
          this.options.forEach((elm, idx) => {
            elm.check = false
          })
          this.value = []
        } else {
          this.options.forEach((elm, idx) => {
            if (elm.value == value || elm.value == 'all') {
              elm.check = false
            }
          })
        }
        this.$emit('selectedVal', this.value)
      },
      clearSelection() {
        this.value = [];
        this.options.forEach((elm, idx) => {
            elm.check = false
        })
        this.$emit('selectedVal', this.value);
      }
    }
  }
  </script>
   
  <style lang="scss">
  .select-checked {
    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
      content: '';
    }
    .el-checkbox {
      width: 100%;
      padding: 0 30px;
      .el-checkbox__label {
        margin-left: 20px;
      }
    }
    .el-select-dropdown__item {
      padding: 0;
    }
  }
  </style>