vue表格实现复选框

实现复选框的基本方法

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

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll" @change="toggleAll"></th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedItems = this.selectAll 
        ? this.items.map(item => item.id) 
        : [];
    }
  }
}
</script>

使用第三方组件库

若使用Element UI等组件库，可直接调用现成的表格复选框功能：

<template>
  <el-table
    :data="items"
    @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>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val;
    }
  }
}
</script>

自定义复选框样式

通过CSS自定义复选框样式，提升视觉效果：

.custom-checkbox {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

.custom-checkbox:checked {
  background-color: #409EFF;
  border-color: #409EFF;
}

.custom-checkbox:checked::after {
  content: "✓";
  color: white;
  position: absolute;
  left: 3px;
  top: -1px;
}

性能优化建议

对于大数据量表格，建议采用虚拟滚动或分页加载。可通过计算属性优化选中状态判断：

computed: {
  isAllSelected() {
    return this.selectedItems.length === this.items.length;
  }
}

完整示例代码

以下是一个包含全选/反选功能的完整实现：

<template>
  <div>
    <button @click="toggleAll">{{ isAllSelected ? 'Unselect All' : 'Select All' }}</button>
    <table>
      <tbody>
        <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>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [/* your data */],
      selectedItems: new Set()
    }
  },
  computed: {
    isAllSelected() {
      return this.selectedItems.size === this.items.length;
    }
  },
  methods: {
    toggleSelect(id) {
      this.selectedItems.has(id) 
        ? this.selectedItems.delete(id) 
        : this.selectedItems.add(id);
    },
    toggleAll() {
      if (this.isAllSelected) {
        this.selectedItems.clear();
      } else {
        this.items.forEach(item => this.selectedItems.add(item.id));
      }
    },
    isSelected(id) {
      return this.selectedItems.has(id);
    }
  }
}
</script>