elemenui 多选框的已选列表如何实现向倒叙展示？？
站长
· 阅读数 8
请问一下 每次添加的时候是在头部添加的 然后全选之后 取消一个 再去选择也是往头部添加 应该怎么做
<el-checkbox-group v-model="checkedValues">
<el-checkbox v-for="item in options" :label="item.advertiser_id" :key="item.advertiser_id">{{
item.name
}}</el-checkbox>
</el-checkbox-group>
data = [
{
"advertiser_id": "1704697022997511",
"name": "轩辕-物理-01（广州)",
"is_auth": 1
},
{
"advertiser_id": "1742749090922510",
"name": "轩辕-北京-康子豪-考研1元-20",
"is_auth": 1
},
{
"advertiser_id": "1742748983653389",
"name": "轩辕-北京-康子豪-考研-13",
"is_auth": 1
},
{
"advertiser_id": "1742749088674829",
"name": "轩辕-北京-康子豪-考研-16",
"is_auth": 1
},
{
"advertiser_id": "1742749089812557",
"name": "轩辕-北京-康子豪-考研-18",
"is_auth": 1
}
]
回复
1个回答
test
2024-06-30
<template>
<div>
<el-checkbox-group v-model="checkedValues">
<el-checkbox v-for="item in options" :label="item" :key="item">{{ item }}</el-checkbox>
</el-checkbox-group>
<el-button @click="selectAll">全选</el-button>
<el-button @click="unselectAll">全不选</el-button>
</div>
</template>
<script>
export default {
data() {
return {
options: ['Apple', 'Orange', 'Banana'],
checkedValues: []
}
},
methods: {
selectAll() {
this.checkedValues = [...this.options].reverse();
},
unselectAll() {
this.checkedValues = [];
}
},
watch: {
checkedValues: {
handler(newVal, oldVal) {
if (newVal.length > oldVal.length) {
let newElement = newVal.find(item => !oldVal.includes(item));
this.checkedValues = this.checkedValues.filter(item => item !== newElement);
this.checkedValues.unshift(newElement);
}
},
deep: true
}
}
}
</script>
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容