韩国麦当劳 2023-01-06 22:51 采纳率: 80%
浏览 36

在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>
    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 1月6日

悬赏问题

  • ¥20 ic卡dump文件校检码解密
  • ¥15 关于：接收到的数据不是有效的JSON格式
  • ¥15 apdl语言如何增加受力分析
  • ¥15 算法对比：学校优化算法与蚁群算法对比
  • ¥15 机电一体化系统设计说明书
  • ¥20 sgy数据提取地震波速，有人能回答吗小馋
  • ¥20 c#实现打开word的功能，并且需要安装成windows服务，word打不开怎么办
  • ¥15 python用ARIMA时间预测模型预测数据出错，急！
  • ¥30 为什么后端传给前端vue的河流json数据不在地图中显示出来
  • ¥50 关于弹性波动方程求解的问题：