vue表格实现复选框

实现复选框的基本方法

在Vue中实现表格复选框功能，可以通过v-model绑定数据，结合v-for渲染表格行。以下是一个基础实现示例：

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll" @change="toggleAll"></th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td><input type="checkbox" v-model="selectedItems" :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: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedItems = this.selectAll 
        ? this.tableData.map(item => item.id) 
        : [];
    }
  }
}
</script>

使用第三方组件库

对于更复杂的需求，可以使用Element UI或Ant Design Vue等组件库：

Element UI示例：

<template>
  <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-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

自定义复选框逻辑

需要更精细控制时，可以手动实现选择逻辑：

<template>
  <table>
    <tr v-for="item in items" :key="item.id">
      <td>
        <input 
          type="checkbox" 
          :checked="isSelected(item.id)"
          @change="toggleSelect(item.id)"
        >
      </td>
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedIds: []
    }
  },
  methods: {
    isSelected(id) {
      return this.selectedIds.includes(id)
    },
    toggleSelect(id) {
      const index = this.selectedIds.indexOf(id)
      if (index === -1) {
        this.selectedIds.push(id)
      } else {
        this.selectedIds.splice(index, 1)
      }
    }
  }
}
</script>

性能优化建议

对于大型数据集，应考虑以下优化措施：

• 使用虚拟滚动技术避免渲染所有行
• 对选择状态使用对象存储而非数组，提升查找效率
• 避免在模板中使用复杂计算

// 优化选择状态存储
selectedItems: {
  1: true,
  2: false
}

响应式处理

当需要响应选择变化时，可以使用计算属性或watch：

computed: {
  selectedCount() {
    return this.selectedItems.length
  }
},
watch: {
  selectedItems(newVal) {
    console.log('选择变化:', newVal)
  }
}