韩国麦当劳 2023-01-06 22:51 采纳率: 100%
浏览 40
已结题

在Element-ui的msgbox如何加入远程搜索选择器？


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: '已取消入库'
                });
            });
  • 写回答

1条回答 默认 最新

  • 小草的味道 2023-01-07 09:51
    关注
    
<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 12月30日
  • 已采纳回答 12月22日
  • 创建了问题 1月6日