el-select 实现多选和全选_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"
              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: ['选项1', '选项2', '选项3', '选项4', '选项5']
      },
	  options: [
        { value: '选项1', label: '黄金糕' },
        { value: '选项2', label: '双皮奶' },
        { value: '选项3', label: '蚵仔煎' },
        { value: '选项4', label: '龙须面' },
        { value: '选项5', label: '北京烤鸭' }
      ]
	}
  },
  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 = []
      }
    }
  }