elementui使用MessageBox 弹框自定义内容$msgbox:实现循环生成一个多选框
时间: 2024-03-17 09:44:17 浏览: 30
你可以使用MessageBox的自定义内容功能来实现循环生成多选框。具体实现步骤如下:
1. 在MessageBox中使用自定义内容,可以通过设置属性customClass来指定弹框内容的样式类名,然后在该样式类中添加自定义内容。
2. 在自定义内容中通过v-for指令循环生成多选框,例如:
```html
<template v-for="(item, index) in options">
<el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
</template>
```
其中,options为一个包含多选框选项的数组,每个选项包含label和value两个属性。
3. 在MessageBox的配置选项中,通过设置showCancelButton和showConfirmButton来隐藏默认的取消和确定按钮,然后添加自定义按钮来提交用户选择的多选框内容。
完整代码示例如下:
```javascript
this.$msgbox({
title: '请选择',
customClass: 'my-msgbox',
showCancelButton: false,
showConfirmButton: false,
message: `
<div v-for="(item, index) in options">
<el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
</div>
`,
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
const checkedValues = instance.$el.querySelectorAll('.el-checkbox__input.is-checked')
const selectedOptions = []
checkedValues.forEach((value) => {
selectedOptions.push(value.previousElementSibling.textContent)
})
// 将用户选择的多选框内容提交给后端处理
console.log(selectedOptions)
}
done()
}
})
```
其中,beforeClose是一个回调函数,当用户点击确定或取消按钮时会触发该函数。在该函数中,可以通过instance.$el来获取MessageBox的DOM元素,然后使用querySelectorAll方法获取所有被选中的多选框,最后将选中的多选框内容提交给后端处理。