iview 非 template/render 模式 Modal失效

发布于 2022-09-11 20:51:32 字数 3501 浏览 18 评论 0

<div id="app">
    <i-button type="primary" @click="add">添加</i-button>
    <i-table :columns="col" :data="list" style="margin-top: 20px;margin-bottom: 20px;"></i-table>
    <Page :total="page.total" :page-size="page.pageSize" @on-change="getList"/>
    <Modal v-model="addModal" title="添加" @on-ok="addModalF">
        <span>域名</span>
        <i-input v-model="addVal"/>
    </Modal>

    <Modal v-model="editModal" title="编辑" @on-ok="editModalF">
        <span>域名</span>
        <i-input v-model="editInfo.domain" type="text"/>
    </Modal>
</div>
<script>
    var vm = new Vue({
            el: "#app",
            data() {
                let self = this;
                return {
                    addModal: true,
                    editModal: false,
                    addVal: '',
                    col: [
                        {
                            title: "ID",
                            key: "id"
                        },
                        {
                            title: "域名",
                            key: "domain"
                        },
                        {
                            title: "操作",
                            key: "action",
                            align: "center",
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                self.edit(params.index)
                                            }
                                        }
                                    }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                console.log(params);
                                                self.del(params.index)
                                            }
                                        }
                                    }, '删除')
                                ]);
                            }
                        }
                    ],
                    list: [],
                    editInfo: {},
                    page: {
                        total: 0,
                        pageSize: 0
                    }
                }
            },
            created: function () {
                this.getList();
            },
            methods: {
                getList(page) {
                    //dosoming
                },
                add() {
                    var self = this;
                    self.addModal = true;
                },
            }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

伪心 2022-09-18 20:51:32

哪个失效,没描述清楚,而且事件名没对应上还是什么

探春 2022-09-18 20:51:32

我也遇到这个问题了 == 请问一下楼主是最后是怎么处理的

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文