vue结合elementui如何实现单选和全选

可以通过以下步骤实现单选和全选：

1. 定义一个变量selected来存储选中的项，可以初始化为空数组。
2. 在列表中的每个项上绑定一个点击事件，当点击时将该项的值添加到selected中，如果该项已经被选中，则将其从selected中删除。
3. 定义一个全选的复选框，绑定一个change事件。当该复选框被选中时，将列表中所有项的值添加到selected中；当该复选框被取消选中时，将selected清空。
4. 在列表中的每个项前面添加一个复选框，绑定一个change事件。当该复选框被选中时，将该项的值添加到selected中；当该复选框被取消选中时，将其从selected中删除。
5. 在页面中展示selected的内容。

具体实现代码如下：

<template>
  <div>
    <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
    <el-checkbox-group v-model="selected">
      <div v-for="(item, index) in list" :key="index">
        <el-checkbox :label="item.value" @change="handleSelectItem(item.value)">{{ item.label }}</el-checkbox>
      </div>
    </el-checkbox-group>
    <p>已选中的项：{{ selected.join(', ') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ],
      selected: [],
      selectAll: false
    }
  },
  methods: {
    handleSelectAll() {
      if (this.selectAll) {
        this.selected = this.list.map(item => item.value)
      } else {
        this.selected = []
      }
    },
    handleSelectItem(value) {
      const index = this.selected.indexOf(value)
      if (index > -1) {
        this.selected.splice(index, 1)
      } else {
        this.selected.push(value)
      }
      this.selectAll = this.selected.length === this.list.length
    }
  }
}
</script>