elementUI的select下拉框增加checkbox選擇框（可全選/取消）

elementUI的select下拉框增加checkbox選擇框

一、實現效果

　　

 

 

二、實現方法

 

1、組件代碼如下：

 

 

  <div>
    <el-select ref="select" v-model="value" multiple placeholder="請選擇" >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <el-checkbox @change="clickBox(item.value)" :value ="value.includes(item.value)" :label="item.label"></el-checkbox>
      </el-option>
      <div class="btn-div">
        <el-row type="flex" justify="center">
          <el-col :span="12" style="text-align: center;">
            <el-button size="mini" type="primary" @click="ok">確定</el-button>
          </el-col>
          <el-col :span="12">
            <el-button size="mini" @click="cancel">取消</el-button>
          </el-col>
        </el-row>
      </div>
    </el-select>
  </div>

 

2、對應的js

export default {
    data() {
      return {
        options: [],
        value: []
      }
    },
    mounted() {
      let options = []
      for (let index = 1; index <= 5; index++) {
        options.push({
          value: index,
          label: '選項' + index
        })
      }
      this.options = options
      console.log('mounted....')
    },
    methods: {
      cancel() {
        this.$message('點擊了取消~');
        this.$refs.select.blur()
      },
      ok() {
        this.$message('點擊了確定~');
        this.$refs.select.blur()
      },
      clickBox(val) {
        console.log('val::', val);
        let values = this.value
        if(values.includes(val)) {
          this.value = values.filter(n => n !== val)
        } else {
          values.push(val)
          this.value = values
        }
        console.log('this.value::', this.value)
      }
    }
  }

三、擴展（下拉框內容過多時按鈕懸浮顯示，並支持全部選中/取消）

 

   具體代碼，點擊鏈接下載