export default {
data() {
return {
optionList: ['a', 'd'],
value: 'a'
}
},
mounted() {
this.selectDialog()
},
methods: {
selectDialog() {
const h = this.$createElement;
const that = this
this.$msgbox({
title: "请选择数据",
message: h('el-select',
{
props: {
value: that.value,
filterable: true,
},
ref: 'selectView',
on: {
change:e => {
that.value = e
that.$refs.selectView.value = e // select下拉框值改变,回显到页面上
},
},
},
[
this.optionList.map(it => {
return h('el-option', {
props: {
label: it,
key: it,
value: it,
},
});
})
]
),
showCancelButton: true,
closeOnClickModal: false,
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then( _ => {
// 成功操作。。。。
}).catch(msg => {
// 取消操作。。。。
});
}
}
}
相关文章
- 11-21element-- 修改MessageBox 弹框 中确定和取消按钮顺序
- 11-21vue定时器+弹框 跳到登陆页面
- 11-21vue 手机物理返回键关闭弹框
- 11-21vue.$nextTick解决elementUI弹框视图未更新问题
- 11-21Vue + Element-ui的下拉框el-select获取额外参数详解
- 11-21vue中的父子组件之间的通信--新增、修改弹框
- 11-21vue 上传组件 选择文件之前有校验 ,校验通过弹出文件选择框,否则不弹
- 11-21vue中使用element-ui,重复点击按钮或多个请求同时报错时弹出多个message弹框解决方法
- 11-21Vue项目中结合Vue-layer实现弹框式编辑功能
- 11-21Vue3 制作一个自定义的弹框插件