SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
  el: '#app',
  data: {
    data: [],
    options: [
        {
            label: '选项1',
            value: 1
        },
        {
            label: '选项2',
            value: 2
        },
        {
            label: '选项3',
            value: 3
        }
    ]
  },
  computed: {
      selectAll() {
          if(this.data.length){
              return this.data.length === this.options.length;
          }
          return false;
      },
      indeterminate() {
          if(this.data.length){
              return this.data.length !== this.options.length;
          }
          return false;
      }
  },
  methods: {
      selectAllHandle(bool) {
          this.data = bool ? this.options.map(v => v.value) : [];
      }
  },
})
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js">

</script>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>

<div id="app">
	<el-select v-model="data" multiple popper-class="select-popover-class">
        <el-checkbox :value="selectAll" :indeterminate="indeterminate" @change="selectAllHandle">全选</el-checkbox>
		<el-option 
            v-for="item in options" 
            :key="item.value" 
            :value="item.value"
            :label="item.label" >
            <el-checkbox :value="data.includes(item.value)" :label="item.label">
        </el-option>
	</el-select>
</div>
/* 控制全选按钮样式 */
.select-popover-class .el-scrollbar__view > .el-checkbox{
    padding: 5px 20px;
}

/* 取消多选框触发事件 */
.select-popover-class .el-scrollbar__view > li .el-checkbox {
    pointer-events: none;
}

/* 隐藏多选框选中勾选样式 √ */
.select-popover-class .el-scrollbar__view > li::after {
    display: none;
}