当前位置：首页 > VUE

Vue中table实现CheckBox

2026-01-21 18:12:04VUE

Vue中实现表格复选框功能

在Vue中为表格添加复选框功能可以通过多种方式实现，以下是几种常见方法：

使用v-model绑定选中状态

为表格的每一行数据添加一个选中状态字段，通过v-model绑定复选框：

Vue中table实现CheckBox

<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="item.selected"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, selected: false },
        { name: '李四', age: 30, selected: false },
        { name: '王五', age: 28, selected: false }
      ],
      selectAll: false
    }
  },
  watch: {
    selectAll(newVal) {
      this.tableData.forEach(item => {
        item.selected = newVal
      })
    }
  }
}
</script>

使用数组存储选中项ID

对于大数据量表格，可以采用存储选中项ID的方式提高性能：

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" 
                  :checked="selectedItems.length === tableData.length"
                  @change="toggleSelectAll"></th>
        <th>ID</th>
        <th>姓名</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td><input type="checkbox" 
                  :checked="selectedItems.includes(item.id)"
                  @change="toggleSelect(item.id)"></td>
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelect(id) {
      const index = this.selectedItems.indexOf(id)
      if (index > -1) {
        this.selectedItems.splice(index, 1)
      } else {
        this.selectedItems.push(id)
      }
    },
    toggleSelectAll(e) {
      if (e.target.checked) {
        this.selectedItems = this.tableData.map(item => item.id)
      } else {
        this.selectedItems = []
      }
    }
  }
}
</script>

使用第三方组件库

Element UI等流行UI库提供了现成的表格复选框功能：

Vue中table实现CheckBox

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        name: '张三',
        age: 25
      }, {
        name: '李四',
        age: 30
      }],
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

实现跨页选择功能

对于分页表格，需要额外处理跨页选择：

methods: {
  toggleSelect(item) {
    const id = item.id
    if (this.selectedMap[id]) {
      delete this.selectedMap[id]
    } else {
      this.selectedMap[id] = true
    }
    this.selectedItems = Object.keys(this.selectedMap)
  },
  isSelected(id) {
    return this.selectedMap[id] || false
  }
}