当前位置：首页 > VUE

Vue中table实现CheckBox

2026-02-22 09:27:00VUE

Vue中实现Table的CheckBox功能

在Vue中为表格添加CheckBox功能，可以通过以下方式实现。这里以Element UI的el-table为例，原生表格的实现逻辑类似。

基础实现

定义表格数据时，为每行添加一个selected属性用于绑定CheckBox状态：

data() {
  return {
    tableData: [
      { id: 1, name: '张三', selected: false },
      { id: 2, name: '李四', selected: false }
    ]
  }
}

在模板中使用el-table-column渲染CheckBox列：

<el-table :data="tableData">
  <el-table-column width="50">
    <template #default="{ row }">
      <el-checkbox v-model="row.selected" />
    </template>
  </el-table-column>
  <el-table-column prop="name" label="姓名" />
</el-table>

全选功能实现

添加表头CheckBox实现全选功能：

Vue中table实现CheckBox

<el-table :data="tableData" @select-all="handleSelectAll">
  <el-table-column width="50">
    <template #header>
      <el-checkbox v-model="selectAll" @change="toggleSelectAll" />
    </template>
    <template #default="{ row }">
      <el-checkbox v-model="row.selected" @change="updateSelectAll" />
    </template>
  </el-table-column>
  <!-- 其他列 -->
</el-table>

对应的JavaScript逻辑：

data() {
  return {
    selectAll: false
  }
},
methods: {
  toggleSelectAll(val) {
    this.tableData.forEach(item => {
      item.selected = val
    })
  },
  updateSelectAll() {
    this.selectAll = this.tableData.every(item => item.selected)
  }
}

获取选中项

添加方法获取当前选中的行数据：

Vue中table实现CheckBox

methods: {
  getSelectedRows() {
    return this.tableData.filter(row => row.selected)
  }
}

性能优化

对于大数据量的表格，使用计算属性优化选中状态判断：

computed: {
  selectedCount() {
    return this.tableData.filter(item => item.selected).length
  },
  isIndeterminate() {
    return this.selectedCount > 0 && this.selectedCount < this.tableData.length
  }
}

在模板中使用这些计算属性：

<el-checkbox
  v-model="selectAll"
  :indeterminate="isIndeterminate"
  @change="toggleSelectAll"
/>

原生表格实现

不使用UI框架时，原生实现方式：

<table>
  <thead>
    <tr>
      <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"></th>
      <th>姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in tableData" :key="index">
      <td><input type="checkbox" v-model="item.selected" @change="updateSelectAll"></td>
      <td>{{ item.name }}</td>
    </tr>
  </tbody>
</table>

JavaScript逻辑与上述Element UI示例类似。