this.$msgbox({
title: "请选择",
message: h('el-select',
{
props: {
value: that.value,
filterable: true,
remote: true,
remoteMethod: that.remoteMethod,
loading: that.loadings,
clearable: true,
},
ref: 'selectView',
on: {
change: e => {
that.value = e
that.$refs.selectView.value = e // select下拉框值改变，回显到页面上
},
},
},
[
console.log(that.options),
this.options.map(it => {
return h('el-option', {
props: {
label: it.label,
value: it.value,
key: it.value,
},
});
})
]
),
showCancelButton: true,
closeOnClickModal: false,
confirmButtonText: '确定',
cancelButtonText: '取消',
}).then(_ => {
// 成功操作。。。。
this.whiskysellList.splice(index, 1);
this.$message({
type: 'success',
message: '入库成功!'
});
}).catch(msg => {
this.$message({
type: 'info',
message: '已取消入库'
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
Vue.component('button-counter', {
data: function() {
return {
options: [],
value: [],
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"
]
}
},
mounted() {
this.list = this.states.map(item => {
return {
value: `value:${item}`,
label: `label:${item}`
};
});
},
methods: {
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
}
},
template: `<el-select v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>`
})
var Main = {
methods: {
open() {
const h = this.$createElement;
this.$msgbox({
title: '消息',
message:h('button-counter'),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
instance.confirmButtonText = '执行中...';
setTimeout(() => {
done();
setTimeout(() => {
instance.confirmButtonLoading = false;
}, 300);
}, 3000);
} else {
done();
}
}
}).then(action => {
this.$message({
type: 'info',
message: 'action: ' + action
});
});
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</body>
</html>