vue实现li多选
实现思路
在Vue中实现li多选功能，可以通过数据绑定和事件处理来完成。核心思路是利用数组存储选中的项，通过v-for渲染列表，结合v-model或@click动态更新选中状态。
基础实现方法
模板部分
<template>
<ul>
<li
v-for="item in list"
:key="item.id"
@click="toggleSelect(item)"
:class="{ 'selected': selectedItems.includes(item) }"
>
{{ item.name }}
</li>
</ul>
</template>脚本部分
<script>
export default {
data() {
return {
list: [
{ id: 1, name: '选项1' },
{ id: 2, name: '选项2' },
{ id: 3, name: '选项3' }
],
selectedItems: []
}
},
methods: {
toggleSelect(item) {
const index = this.selectedItems.findIndex(selected => selected.id === item.id)
if (index === -1) {
this.selectedItems.push(item)
} else {
this.selectedItems.splice(index, 1)
}
}
}
}
</script>样式部分
<style>
.selected {
background-color: #42b983;
color: white;
}
</style>使用复选框实现
如果需要更直观的多选体验，可以结合复选框实现：
模板部分
<template>
<ul>
<li v-for="item in list" :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>
</template>全选/反选功能
添加全选功能可以提升用户体验：
模板部分
<template>
<div>
<input type="checkbox" id="selectAll" v-model="allSelected" @change="toggleAll">
<label for="selectAll">全选</label>
<ul>
<li v-for="item in list" :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 {
data() {
return {
// 其他数据同上
allSelected: false
}
},
methods: {
toggleAll() {
this.selectedItems = this.allSelected ? [...this.list] : []
}
},
watch: {
selectedItems: {
handler(newVal) {
this.allSelected = newVal.length === this.list.length
},
deep: true
}
}
}
</script>性能优化建议
对于大型列表，可以考虑以下优化：
- 使用对象代替数组存储选中状态，提升查找效率
- 添加虚拟滚动技术处理超长列表
- 使用计算属性减少不必要的计算
注意事项
- 确保每个
li有唯一的key属性 - 对象比较时注意引用类型的问题
- 多选功能可能需要根据实际需求调整选中逻辑
