vue实现表格复选

实现表格复选的基本思路

在Vue中实现表格复选功能，通常需要结合v-model绑定选中状态，监听复选框变化事件，以及维护一个选中项的数组。以下是具体实现方法：

基础实现步骤

数据准备 定义表格数据和选中项的数组：

data() {
  return {
    tableData: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' }
    ],
    selectedItems: []
  }
}

模板部分 使用v-model绑定复选框到selectedItems数组：

<table>
  <tr v-for="item in tableData" :key="item.id">
    <td>
      <input 
        type="checkbox" 
        :value="item.id" 
        v-model="selectedItems"
      >
    </td>
    <td>{{ item.name }}</td>
  </tr>
</table>

全选功能实现

添加全选复选框

<input 
  type="checkbox" 
  @change="handleSelectAll" 
  :checked="isAllSelected"
>
全选

计算属性和方法

computed: {
  isAllSelected() {
    return this.selectedItems.length === this.tableData.length
  }
},
methods: {
  handleSelectAll(e) {
    if (e.target.checked) {
      this.selectedItems = this.tableData.map(item => item.id)
    } else {
      this.selectedItems = []
    }
  }
}

使用第三方组件库

如果使用Element UI等组件库，实现会更简单：

Element UI示例

<el-table
  :data="tableData"
  @selection-change="handleSelectionChange"
>
  <el-table-column
    type="selection"
    width="55">
  </el-table-column>
  <el-table-column
    prop="name"
    label="Name">
  </el-table-column>
</el-table>

处理选中变化

methods: {
  handleSelectionChange(val) {
    this.selectedItems = val
  }
}

注意事项

• 确保每个数据项有唯一标识符（通常是id）
• 对于大数据量表格，考虑性能优化（如虚拟滚动）
• 如果需要跨页选择，需要额外处理分页逻辑
• 样式可以根据项目需求自定义

以上方法提供了从基础到进阶的表格复选实现方案，可根据具体项目需求选择合适的实现方式。