vue表格实现复选框

Vue表格实现复选框的方法

基础实现（使用v-model绑定数组）

在Vue中可以通过v-model绑定数组来实现复选框功能。以下是一个基础示例：

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

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ],
      selectedItems: []
    }
  }
}
</script>

使用Element UI等UI库

主流UI库如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>
</template>

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

全选/反选功能实现

添加表头复选框控制全选状态：

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

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

自定义复选框样式

通过CSS自定义复选框外观：

.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
}

.custom-checkbox input {
  opacity: 0;
  position: absolute;
}

.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  border-radius: 3px;
}

.custom-checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

性能优化建议

对于大型数据表格，考虑使用虚拟滚动技术避免渲染过多DOM节点。可以结合vue-virtual-scroller等库实现：

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