当前位置：首页 > VUE

vue实现li多选

2026-01-15 22:51:42VUE

Vue 实现列表多选功能

在 Vue 中实现列表（<li>）的多选功能可以通过多种方式完成。以下是几种常见的实现方法：

使用 v-model 绑定数组

通过 v-model 绑定一个数组来存储选中的项，适用于复选框场景。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <input 
        type="checkbox" 
        :value="item.id" 
        v-model="selectedItems"
      />
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    };
  }
};
</script>

使用点击事件切换选中状态

通过点击事件动态切换选中状态，适用于无复选框的场景。

<template>
  <ul>
    <li 
      v-for="item in items" 
      :key="item.id"
      :class="{ 'selected': selectedItems.includes(item.id) }"
      @click="toggleItem(item.id)"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleItem(id) {
      if (this.selectedItems.includes(id)) {
        this.selectedItems = this.selectedItems.filter(item => item !== id);
      } else {
        this.selectedItems.push(id);
      }
    }
  }
};
</script>

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

支持 Ctrl/Shift 键多选

通过监听键盘事件实现类似桌面应用的多选行为。

<template>
  <ul @click="handleLiClick">
    <li 
      v-for="item in items" 
      :key="item.id"
      :class="{ 'selected': selectedItems.includes(item.id) }"
      :data-id="item.id"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    };
  },
  methods: {
    handleLiClick(event) {
      const id = parseInt(event.target.dataset.id);
      if (event.ctrlKey || event.metaKey) {
        // Ctrl/Cmd 键多选
        this.toggleItem(id);
      } else {
        // 普通单选
        this.selectedItems = [id];
      }
    },
    toggleItem(id) {
      if (this.selectedItems.includes(id)) {
        this.selectedItems = this.selectedItems.filter(item => item !== id);
      } else {
        this.selectedItems.push(id);
      }
    }
  }
};
</script>

使用第三方库

对于更复杂的需求，可以考虑使用第三方库如 vue-draggable 或 v-select 等。

npm install vue-draggable

<template>
  <draggable 
    v-model="items" 
    @start="drag=true" 
    @end="drag=false"
  >
    <li 
      v-for="item in items" 
      :key="item.id"
      :class="{ 'selected': selectedItems.includes(item.id) }"
      @click="toggleItem(item.id)"
    >
      {{ item.name }}
    </li>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItems: []
    };
  },
  methods: {
    toggleItem(id) {
      if (this.selectedItems.includes(id)) {
        this.selectedItems = this.selectedItems.filter(item => item !== id);
      } else {
        this.selectedItems.push(id);
      }
    }
  }
};
</script>

以上方法可以根据具体需求选择或组合使用，实现灵活的多选功能。

vue实现li多选