el-select 实现多选和全选

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

实现效果：

代码:

<template>
  <div>
    <el-form ref="form" label-width="80px" :model="test">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="测试">
            <el-select
              v-model="test.code"
              filterable
              remote
              reserve-keyword
              multiple
              collapse-tags
              v-bind="$attrs"
              v-on="$listeners"
            >
              <el-checkbox
                v-model="check"
                class="m-l-20"
                :indeterminate="test.code.length !== options.length"
                @change="selectAll"
              >
                全选
              </el-checkbox>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
 
...
 
 
data () {
    return {
      test: {
        code: ['admin', '叶东飞', '刘明昆']
      },
	  options: [
        { value: 'admin', label: '0' },
        { value: '叶东飞', label: '1' },
        { value: '刘明昆', label: '2' }
      ]
	}
  },
  computed: {
    check: {
      get () {
        if (this.test.code.length === this.options.length) {
          return true
        }
        return false
      },
      set () {}
    }
  },
  methods: {
    ...
    selectAll (checked) {
      if (checked) {
        this.test.code = this.options.map(d => d.value)
      } else {
        this.test.code = []
      }
    }
  }