vue实现表格选择

Vue 实现表格选择功能

在 Vue 中实现表格选择功能可以通过多种方式完成，常见的方法包括使用复选框、单选框或通过点击行高亮选中。以下是几种常见的实现方式。

使用复选框实现多选

在表格的每一行添加复选框，用户可以通过勾选复选框来选择多行数据。

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll" @change="toggleSelectAll"></th>
        <th>ID</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.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' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: [],
      selectAll: false
    };
  },
  methods: {
    toggleSelectAll() {
      if (this.selectAll) {
        this.selectedItems = this.items.map(item => item.id);
      } else {
        this.selectedItems = [];
      }
    }
  }
};
</script>

使用点击行高亮实现单选或多选

通过点击行来选中或取消选中某一行，适用于更直观的用户交互。

<template>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr 
        v-for="item in items" 
        :key="item.id" 
        @click="toggleSelect(item.id)"
        :class="{ 'selected': selectedItems.includes(item.id) }"
      >
        <td>{{ 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' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleSelect(id) {
      const index = this.selectedItems.indexOf(id);
      if (index === -1) {
        this.selectedItems.push(id);
      } else {
        this.selectedItems.splice(index, 1);
      }
    }
  }
};
</script>

<style>
.selected {
  background-color: #f0f0f0;
}
</style>

使用第三方库实现复杂表格选择

对于更复杂的需求，可以使用第三方表格组件库（如 Element UI、Ant Design Vue 或 Vuetify）快速实现表格选择功能。

以 Element UI 为例：

<template>
  <el-table
    :data="items"
    @selection-change="handleSelectionChange"
    style="width: 100%"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="id" label="ID" width="180"></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' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val;
    }
  }
};
</script>

注意事项

• 如果表格数据量较大，建议使用分页或虚拟滚动优化性能。
• 对于需要频繁操作选中状态的场景，可以结合 Vuex 或 Pinia 管理选中状态。
• 如果需要在选中时触发其他逻辑（如禁用某些操作），可以在 @selection-change 或 @click 事件中添加额外逻辑。