vue实现li多选

实现多选列表的基本思路

在Vue中实现多选列表功能，可以通过v-model绑定数组来管理选中状态。当用户点击列表项时，动态更新数组内容。

基础实现代码示例

<template>
  <div>
    <ul>
      <li 
        v-for="item in items" 
        :key="item.id"
        @click="toggleSelection(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: {
    toggleSelection(item) {
      const index = this.selectedItems.findIndex(i => i.id === item.id)
      if (index === -1) {
        this.selectedItems.push(item)
      } else {
        this.selectedItems.splice(index, 1)
      }
    }
  }
}
</script>

<style>
.selected {
  background-color: #eee;
  font-weight: bold;
}
</style>

使用复选框的实现方式

更符合用户习惯的方式是使用复选框：

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

全选/全不选功能

可以添加全选功能提升用户体验：

<template>
  <div>
    <div>
      <input 
        type="checkbox" 
        id="select-all" 
        v-model="allSelected"
        @change="toggleAll"
      >
      <label for="select-all">全选</label>
    </div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input 
          type="checkbox" 
          :id="'item-' + item.id" 
          :value="item" 
          v-model="selectedItems"
        >
        <label :for="'item-' + item.id">{{ item.name }}</label>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    allSelected: {
      get() {
        return this.selectedItems.length === this.items.length
      },
      set(value) {
        this.selectedItems = value ? [...this.items] : []
      }
    }
  }
}
</script>

性能优化建议

对于大型列表，使用对象存储选中状态比数组更高效：

data() {
  return {
    selectedMap: {}
  }
},
methods: {
  toggleSelection(item) {
    this.$set(this.selectedMap, item.id, !this.selectedMap[item.id])
  },
  selectedItems() {
    return this.items.filter(item => this.selectedMap[item.id])
  }
}

与后端交互

提交选中数据时，通常只需要ID数组：

submit() {
  const selectedIds = this.selectedItems.map(item => item.id)
  // 发送selectedIds到后端
}

以上实现方式可以根据具体需求进行调整和组合，Vue的响应式系统使得多选列表的实现变得简单直观。