vue el实现全选

实现全选功能的方法

在 Vue 和 Element UI 中实现全选功能，通常需要结合 el-checkbox 和 el-table 组件。以下是具体实现方式：

使用 el-checkbox 实现全选

1. 模板部分

   

   <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
   <el-checkbox-group v-model="selectedItems">
   <el-checkbox v-for="item in items" :label="item.id" :key="item.id">{{ item.name }}</el-checkbox>
   </el-checkbox-group>

2. 脚本部分

   

   data() {
   return {
    selectAll: false,
    selectedItems: [],
    items: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ]
   }
   },
   methods: {
   handleSelectAll(val) {
    this.selectedItems = val ? this.items.map(item => item.id) : []
   }
   }

在 el-table 中实现全选

1. 模板部分

   <el-table
   ref="multipleTable"
   :data="tableData"
   @selection-change="handleSelectionChange">
   <el-table-column type="selection" width="55"></el-table-column>
   <el-table-column prop="name" label="姓名"></el-table-column>
   </el-table>
   <el-checkbox v-model="selectAll" @change="toggleSelection">全选</el-checkbox>

2. 脚本部分

   data() {
   return {
    selectAll: false,
    tableData: [
      { name: '张三' },
      { name: '李四' },
      { name: '王五' }
    ],
    multipleSelection: []
   }
   },
   methods: {
   toggleSelection(rows) {
    if (this.selectAll) {
      this.$refs.multipleTable.clearSelection()
      this.tableData.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row)
      })
    } else {
      this.$refs.multipleTable.clearSelection()
    }
   },
   handleSelectionChange(val) {
    this.multipleSelection = val
    this.selectAll = val.length === this.tableData.length
   }
   }

注意事项

• 使用 el-checkbox 实现全选时，需要确保 v-model 绑定的数组能够正确反映选中状态
• 在表格中使用全选功能时，el-table 的 selection 列会自动处理部分逻辑
• 当手动取消部分选项时，全选复选框应该自动变为未全选状态
• 表格数据的 row-key 需要唯一，否则可能导致选择状态异常