Vue实现点击按钮弹窗翻页多选,选择后再次打开弹窗已选择数据已勾选
时间: 2024-02-09 08:08:52 浏览: 103
vue 实现一个简单的全局调用弹窗案例
您好,对于您的问题,我可以给您提供一种实现方式:
1. 在Vue组件中,定义一个data属性,用于存储已选择的数据列表,例如:
```javascript
data() {
return {
selectedList: [] // 存储已选择的数据列表
}
}
```
2. 点击按钮弹出弹窗,在弹窗中展示需要选择的数据列表,并在每个数据项中添加一个勾选框,绑定一个change事件,用于更新已选择的数据列表,例如:
```html
<template>
<div>
<button @click="showSelectModal">选择数据</button>
<div v-if="showModal">
<div v-for="item in dataList" :key="item.id">
<input type="checkbox" :value="item" @change="handleCheckboxChange">
<span>{{ item.name }}</span>
</div>
<button @click="confirm">确认选择</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false, // 弹窗是否展示
dataList: [ // 数据列表
{ id: 1, name: '数据1' },
{ id: 2, name: '数据2' },
{ id: 3, name: '数据3' }
],
selectedList: [] // 存储已选择的数据列表
}
},
methods: {
showSelectModal() {
this.showModal = true
},
handleCheckboxChange(e) {
const value = e.target.value
const index = this.selectedList.findIndex(item => item.id === value.id)
if (e.target.checked) {
if (index === -1) {
this.selectedList.push(value)
}
} else {
if (index !== -1) {
this.selectedList.splice(index, 1)
}
}
},
confirm() {
this.showModal = false
}
}
}
</script>
```
3. 当再次打开弹窗时,将已选择的数据列表传入弹窗组件中,将每个数据项的勾选框的checked属性绑定到已选择的数据列表中,例如:
```html
<template>
<div>
<button @click="showSelectModal">选择数据</button>
<div v-if="showModal">
<div v-for="item in dataList" :key="item.id">
<input type="checkbox" :value="item" :checked="isSelected(item)" @change="handleCheckboxChange">
<span>{{ item.name }}</span>
</div>
<button @click="confirm">确认选择</button>
</div>
</div>
</template>
<script>
export default {
props: {
selectedList: { // 已选择的数据列表
type: Array,
default: () => []
}
},
data() {
return {
showModal: false, // 弹窗是否展示
dataList: [ // 数据列表
{ id: 1, name: '数据1' },
{ id: 2, name: '数据2' },
{ id: 3, name: '数据3' }
]
}
},
methods: {
showSelectModal() {
this.showModal = true
},
handleCheckboxChange(e) {
const value = e.target.value
const index = this.selectedList.findIndex(item => item.id === value.id)
if (e.target.checked) {
if (index === -1) {
this.selectedList.push(value)
}
} else {
if (index !== -1) {
this.selectedList.splice(index, 1)
}
}
},
confirm() {
this.showModal = false
},
isSelected(item) {
return this.selectedList.findIndex(i => i.id === item.id) !== -1
}
}
}
</script>
```
这样,每次打开弹窗时,已选择的数据列表就会自动勾选上,达到您的需求。
希望我的回答能够帮到您!
阅读全文