当前位置：首页 > VUE

vue实现表格复选

2026-03-28 05:40:11VUE

实现表格复选功能

在Vue中实现表格复选功能可以通过多种方式完成，以下是一种常见的实现方法。

数据绑定与复选框

表格复选功能通常需要绑定一个数组来存储选中的行数据。在表格的每一行中添加一个复选框，并将选中的行数据存储在数组中。

vue实现表格复选

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"></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"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

全选与反选功能

实现全选和反选功能需要监听表头的复选框变化，并根据其状态更新所有行的选中状态。

vue实现表格复选

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Charlie', age: 35 }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedItems = [...this.tableData]
      } else {
        this.selectedItems = []
      }
    }
  },
  watch: {
    selectedItems(newVal) {
      this.selectAll = newVal.length === this.tableData.length
    }
  }
}
</script>

样式优化

为表格和复选框添加样式可以提升用户体验，例如高亮选中的行。

<style>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
tr:hover {
  background-color: #f5f5f5;
}
input[type="checkbox"] {
  margin: 0;
}
</style>

使用第三方组件库

如果需要更复杂的功能，可以考虑使用第三方组件库如Element UI或Vuetify，它们提供了内置的表格复选功能。

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

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Charlie', age: 35 }
      ],
      selectedItems: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val
    }
  }
}
</script>