###
Vue 实现列表
单选、
多选和
全选功能
#### 列表
单选功能
实现
对于列表中的
单选操作，在
Vue应用中可以通过绑定`v-model`指令来追踪当前被
选中的项。下面是一个简单的例子，展示了如何创建一个可以
单选的列表：
```
html
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index"
@click="selectItem(index)"
:class="{ 'selected': selectedIndex === index }">{{ item }}</li>
</ul>
Selected Item: {{ selected }}
</div>
```
```
javascript
new
Vue({
el: '#app',
data() {
return {
items: ['Option A', 'Option B', 'Option C'],
selectedIndex: null,
};
},
computed: {
selected() {
if (this
.selectedIndex !== null && this
.items[this
.selectedIndex]) {
return this
.items[this
.selectedIndex];
}
return '';
}
},
methods: {
selectItem(index) {
this
.selectedIndex = index;
}
}
});
```
此代码片段
实现了当用户点击某个列表项时会更新`selectedIndex`变量从而改变样式并显示所
选项[^1]。
#### 列表
多选功能
实现
为了支持
多选模式，则需要维护一个数组用于存储已
选中的索引或对象ID，并通过事件处理函数管理这个集合的状态变化。这里给出一个
多选的例子：
```
html
<div id="multi-app">
<ul>
<li v-for="(item, idx) in multiItems" :key="idx"
@click="toggleSelection(idx)"
:class="{ active: isSelected(idx) }">{{ item
.name }}</li>
</ul>
Selected Items: {{ selectedMultiItems
.join(', ') || "None"}}
</div>
```
```
javascript
new
Vue({
el: '#multi-app',
data() {
return {
multiItems: [
{ name: 'Apple' },
{ name: 'Banana' },
{ name: 'Orange'}
],
selectedIndexes: []
};
},
methods: {
toggleSelection(idx) {
const i = this
.selectedIndexes
.indexOf(idx);
if(i > -1){
this
.selectedIndexes
.splice(i, 1); // Remove from selection
.
}else{
this
.selectedIndexes
.push(idx); // Add to selection
.
}
},
isSelected(idx) {
return this
.selectedIndexes
.includes(idx);
}
},
computed: {
selectedMultiItems(){
return this
.multiItems
.filter((_, idx) => this
.isSelected(idx))
.map(item=>item
.name);
}
}
});
```
这段脚本允许用户点击
不同的条目来进行
多项
选择，并且能够动态
反映用户的交互行为。
####
全选与
反选功能
实现
要增加
全选/取消
全选以及
反向
选择的功能，可以在界面上加入额外按钮控制整个列表的
选择状态。以下是增强版的
多选组件加上了这些特性后的样子：
```
html
<div id="all-select-app">
<!-- 添加两个按钮 -->
<button @click="selectAll()">Select All</button>
<button @click="invertSelection()">Invert Selection</button>
<ul>
<li v-for="(item, idx) in allSelectItems" :key="idx"
@click="toggleAllSelection(idx)"
:class="{ active: isAllSelected(idx) }">{{ item
.label }}</li>
</ul>
Selected Count: {{ selectedCount }} / Total: {{ allSelectItems
.length }}
</div>
```
```
javascript
new
Vue({
el: '#all-select-app',
data() {
return {
allSelectItems: [{ label: 'Red'}, {label:'Green'}, {label:'Blue'}],
allSelectedIndexes: [],
};
},
methods: {
toggleAllSelection(idx) {
let i = this
.allSelectedIndexes
.indexOf(idx);
if (i >= 0) {
this
.allSelectedIndexes
.splice(i, 1);
} else {
this
.allSelectedIndexes
.push(idx);
}
},
selectAll() {
this
.allSelectedIndexes = Array
.from({ length: this
.allSelectItems
.length }, (_, i) => i);
},
invertSelection() {
this
.allSelectedIndexes = this
.allSelectItems
.map((_, idx) =>
!this
.isAllSelected(idx) ? idx : undefined)
.filter(Boolean);
},
isAllSelected(idx) {
return this
.allSelectedIndexes
.includes(idx);
}
},
computed: {
selectedCount() {
return this
.allSelectedIndexes
.length;
}
}
});
```
上述代码
不仅提供了基本的
多选能力，还增加了方便的操作方式让用户更轻松地完成批量
选择的任务[^2]。
超级会员免费看
该博客介绍了如何在Vue.js应用中实现单选、多选、反选以及全选全不选的功能。通过使用特定的数据结构和事件处理方法，结合HTML和JavaScript，实现了点击选中和取消选中。文章特别强调了在使用mint-ui的mt-cell-swiper组件进行左滑删除功能时，需使用v-show而非v-if以避免问题。此外，还提供了相关的HTML代码段、数据结构定义、计算属性和方法，以及二级菜单的单选实现。
订阅专栏 解锁全文
扫一扫
4224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
