当前位置：首页 > VUE

vue实现selectable

2026-01-12 23:49:14VUE

Vue 实现可选择的列表或表格

使用 Vue 实现可选择功能可以通过 v-model 结合自定义逻辑完成。以下是一个基础实现示例，适用于列表或表格项的选择。

模板部分

<template>
  <div>
    <ul>
      <li 
        v-for="item in items" 
        :key="item.id"
        @click="toggleSelect(item)"
        :class="{ 'selected': selectedItems.includes(item) }"
      >
        {{ item.name }}
      </li>
    </ul>
    <p>已选: {{ selectedItems.map(i => i.name).join(', ') }}</p>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' }
      ],
      selectedItems: []
    }
  },
  methods: {
    toggleSelect(item) {
      const index = this.selectedItems.findIndex(i => i.id === item.id)
      if (index >= 0) {
        this.selectedItems.splice(index, 1)
      } else {
        this.selectedItems.push(item)
      }
    }
  }
}
</script>

样式部分

vue实现selectable

<style>
.selected {
  background-color: #42b983;
  color: white;
}
</style>

表格多选实现

对于表格场景，可以结合复选框实现批量选择：

<template>
  <table>
    <thead>
      <tr>
        <th><input type="checkbox" v-model="selectAll" @change="toggleAll"></th>
        <th>名称</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td><input type="checkbox" v-model="selectedItems" :value="item"></td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '项目A' },
        { id: 2, name: '项目B' }
      ],
      selectedItems: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedItems = this.selectAll ? [...this.items] : []
    }
  },
  watch: {
    selectedItems(val) {
      this.selectAll = val.length === this.items.length
    }
  }
}
</script>

第三方组件方案

使用现成组件库可以快速实现高级选择功能：

Element UI 的多选表格：

vue实现selectable

<el-table
:data="tableData"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
</el-table>

Vuetify 的选择控件：

<v-select
v-model="selected"
:items="items"
multiple
label="选择项"
></v-select>

性能优化建议

对于大型数据集，建议采用虚拟滚动技术（如 vue-virtual-scroller）避免渲染所有DOM节点。选择状态应存储在独立的ID数组而非对象引用，以减少内存占用。

// 优化后的选择逻辑
toggleSelect(id) {
  const index = this.selectedIds.indexOf(id)
  index >= 0 
    ? this.selectedIds.splice(index, 1) 
    : this.selectedIds.push(id)
}

移动端适配

在移动设备上，长按手势可触发选择模式：

// 添加触摸事件监听
<li
  @touchstart="startTouch"
  @touchend="endTouch"
  @click="handleClick"
></li>

// 判断长按
startTouch() {
  this.touchTimer = setTimeout(() => {
    this.enterSelectionMode()
  }, 500)
},
endTouch() {
  clearTimeout(this.touchTimer)
}