vue实现表格选择

Vue 实现表格选择的方法

在 Vue 中实现表格选择功能可以通过多种方式完成，以下介绍几种常见的方法：

使用 v-model 绑定选中状态

通过 v-model 绑定复选框的选中状态，可以轻松实现表格行的选择。这种方法适用于需要多选的场景。

<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>

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

使用单选模式

如果需要实现单选功能，可以使用单选框（radio）或点击行时切换选中状态。

<template>
  <table>
    <thead>
      <tr>
        <th>Select</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index" @click="selectItem(item)">
        <td><input type="radio" :checked="selectedItem === item"></td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

使用第三方表格组件

对于更复杂的需求，可以使用第三方表格组件如 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">
    </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>

自定义高亮选中行

可以通过动态绑定 class 或 style 来实现选中行的高亮效果。

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(item, index) in tableData"
        :key="index"
        @click="selectItem(index)"
        :class="{ 'selected': selectedIndex === index }">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

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

注意事项

• 对于大量数据，应考虑性能优化，避免频繁的 DOM 操作。
• 如果需要跨页选择，应维护一个全局的选中状态。
• 在移动端，应考虑触摸交互的友好性。

以上方法可以根据实际需求进行组合或调整，以满足不同的业务场景。