vue实现表格复选

实现表格复选的基础方法

在Vue中实现表格复选功能，可以通过结合v-model和数组来管理选中的行。以下是一个基础实现示例：

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll"></th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td><input type="checkbox" v-model="selectedRows" :value="item.id"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 },
        { id: 3, name: '王五', age: 28 }
      ],
      selectedRows: [],
      selectAll: false
    }
  },
  watch: {
    selectAll(val) {
      this.selectedRows = val ? this.tableData.map(item => item.id) : []
    }
  }
}
</script>

使用计算属性优化全选功能

全选功能可以通过计算属性更优雅地实现：

computed: {
  selectAll: {
    get() {
      return this.selectedRows.length === this.tableData.length
    },
    set(val) {
      this.selectedRows = val ? this.tableData.map(item => item.id) : []
    }
  }
}

处理复杂对象的选择

当表格数据是复杂对象时，可以使用对象比较或特定标识符：

<td>
  <input 
    type="checkbox" 
    v-model="selectedRows" 
    :value="item"
    @change="handleSelect(item)"
  >
</td>

methods: {
  handleSelect(item) {
    const index = this.selectedRows.findIndex(row => row.id === item.id)
    if (index === -1) {
      this.selectedRows.push(item)
    } else {
      this.selectedRows.splice(index, 1)
    }
  }
}

使用第三方表格组件

对于更复杂的需求，可以借助第三方表格组件如Element UI的el-table：

<el-table
  :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-column prop="age" label="年龄"></el-table-column>
</el-table>

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

性能优化建议

对于大数据量的表格，应考虑虚拟滚动或分页加载。可以使用vue-virtual-scroller等库优化性能：

<RecycleScroller
  :items="tableData"
  :item-size="50"
  key-field="id"
>
  <template v-slot="{ item }">
    <tr>
      <td><input type="checkbox" v-model="selectedRows" :value="item.id"></td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </template>
</RecycleScroller>