el-option加上全选按钮

要在el-select组件中加入全选按钮，可以使用el-option组件的多选模式和分组功能来实现。具体步骤如下：

1. 设置el-select组件的多选模式：在el-select上添加multiple属性即可。

2. 使用el-option-group组件来分组：将el-option组件包裹在el-option-group组件中，并设置label属性为组名。

3. 添加全选按钮：在el-option-group中添加一个el-option组件，label属性设置为“全选”，value属性设置为数组形式的所有选项值。

4. 编写全选按钮的逻辑：监听el-select组件的change事件，当选中“全选”选项时，将所有选项值添加到选中的值中；当取消“全选”选项时，清空选中的值。

示例代码如下：

<template>
  <el-select v-model="selectedOptions" multiple @change="handleSelectChange">
    <el-option-group v-for="group in optionGroups" :key="group.label" :label="group.label">
      <el-option v-for="option in group.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
      <el-option :label="'全选'" :value="allOptions"></el-option>
    </el-option-group>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      optionGroups: [
        {
          label: 'Group 1',
          options: [
            { label: 'Option 1-1', value: '1-1' },
            { label: 'Option 1-2', value: '1-2' },
            { label: 'Option 1-3', value: '1-3' },
          ],
        },
        {
          label: 'Group 2',
          options: [
            { label: 'Option 2-1', value: '2-1' },
            { label: 'Option 2-2', value: '2-2' },
            { label: 'Option 2-3', value: '2-3' },
          ],
        },
      ],
      selectedOptions: [],
      allOptions: ['1-1', '1-2', '1-3', '2-1', '2-2', '2-3'],
    };
  },
  methods: {
    handleSelectChange(selectedValues) {
      if (selectedValues.includes(this.allOptions)) {
        this.selectedOptions = this.allOptions;
      } else if (this.selectedOptions.includes(this