使用el-checkbox实现列表多选功能

要使用 `el-checkbox` 实现列表多选功能，你可以按照以下步骤进行操作：

1. 在列表中加入 `el-checkbox`，并使用 `v-model` 绑定一个数组，用于存储选中的项。

<template>
  <div>
    <el-checkbox v-model="selected" :label="item.id" v-for="item in list" :key="item.id">{{ item.name }}</el-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' },
        { id: 4, name: 'item4' }
      ],
      selected: []
    }
  }
}
</script>

2. 在 `el-checkbox` 上使用 `label` 属性，绑定列表项的唯一标识，这样在选中或取消选中时，可以根据 `label` 值来对数组进行操作。

3. 在列表中加入全选按钮，实现全选和取消全选功能。

<template>
  <div>
    <el-checkbox v-model="selectAll" @change="handleSelectAll">{{ selectAll ? '取消全选' : '全选' }}</el-checkbox>
    <el-checkbox v-model="selected" :label="item.id" v-for="item in list" :key="item.id">{{ item.name }}</el-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'item1' },
        { id: 2, name: 'item2' },
        { id: 3, name: 'item3' },
        { id: 4, name: 'item4' }
      ],
      selected: [],
      selectAll: false
    }
  },
  methods: {
    handleSelectAll() {
      if (this.selectAll) {
        this.selected = this.list.map(item => item.id)
      } else {
        this.selected = []
      }
    }
  }
}
</script>

4. 在 `handleSelectAll` 方法中，判断全选按钮是否选中，如果选中，则将数组设为全部选中状态；如果取消选中，则将数组清空。

这样就可以使用 `el-checkbox` 实现列表多选功能了。