Vue中的vxe-table教程20-模态窗口的使用

效果图：1. index.html代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue"></script&g

专职

4042人浏览 · 2021-01-14 16:25:19

专职 · 2021-01-14 16:25:19 发布

效果图：

1. index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
    <!--    使用图标需引入图标对应的css文件即可使用-->
    <!--    下载地址：http://www.fontawesome.com.cn/-->
    <link rel="stylesheet" href="./css/font-awesome.css">
    <!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>

<body>
<div id="app">
    <template>
        <div style="padding: 0 50px 0 50px">
            <h3>消息框</h3>
            <vxe-button @click="$XModal.message({message: '提示消息', status: 'default'})">默认消息框</vxe-button>
            <vxe-button @click="$XModal.message({message: 'success消息', status: 'success'})">success</vxe-button>
            <vxe-button @click="$XModal.message({message: 'question消息', status: 'question'})">question</vxe-button>
            <vxe-button @click="$XModal.message({message: 'error消息', status: 'error'})">error</vxe-button>
            <vxe-button @click="$XModal.message({message: 'loading消息', status: 'loading'})">loading</vxe-button>
            <vxe-button
                    @click="$XModal.message({message: '自定义图标消息', status: 'success', iconStatus: 'fa fa-hand-peace-o'})">
                自定义图标
            </vxe-button>
            <vxe-button @click="$XModal.message({message: '不允许重复点击', id: 'unique1'})">不允许重复点击</vxe-button>
            <h3>提示框</h3>
            <vxe-button @click="$XModal.alert({message: '提示框', status: 'default'})">基本提示框</vxe-button>
            <vxe-button @click="$XModal.alert({message: '警告提示框', status: 'warning'})">警告提示框</vxe-button>
            <vxe-button @click="$XModal.alert({message: '错误提示框', title:'错误信息', status: 'error'})">错误提示框</vxe-button>
            <vxe-button
                    @click="$XModal.alert({message: '自定义图标提示框', status: 'warning', iconStatus: 'fa fa-hand-peace-o'})">
                自定义图标提示框
            </vxe-button>
            <vxe-button @click="confirmEvent">确认提示框</vxe-button>
            <h3>遮罩层关闭、ESC关闭</h3>
            <vxe-button @click="$XModal.alert({message: '点击遮罩层关闭', status: 'info', maskClosable: true})">点击遮罩层关闭
            </vxe-button>
            <vxe-button @click="$XModal.alert({message: '按esc键关闭', status: 'warning', escClosable: true})">按esc键关闭
            </vxe-button>
            <vxe-button @click="$XModal.alert({message: '不要遮罩层', status: 'question', mask: false})">按esc键关闭</vxe-button>
            <h3>基本窗口、位置、大小、最大化</h3>
            <vxe-button @click="value5 = true">基本窗口、位置、大小、最大化</vxe-button>
            <!--            :position="{top: '25%', left: '25%'}" 窗口初始位置的改变 -->
            <!--            fullscreen  最大化-->
            <vxe-modal v-model="value5" width="600" show-zoom resize height="400">
                <template v-slot>
                    <vxe-table
                            resizable
                            auto-resize
                            show-overflow
                            height="auto"
                            :sync-resize="value5"
                            :data="tableData">
                        <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
                        <vxe-table-column field="name" title="姓名"></vxe-table-column>
                        <vxe-table-column field="sex" title="性别"></vxe-table-column>
                        <vxe-table-column field="age" title="年龄"></vxe-table-column>
                    </vxe-table>
                </template>
            </vxe-modal>
            <h3>记忆功能的窗口</h3>
            <vxe-button @click="value8 = true">记忆功能的窗口</vxe-button>
            <vxe-modal v-model="value8" title="记忆功能的窗口" width="600" height="400" show-zoom resize remember>
                <template v-slot>
                    <vxe-form :data="formData3" :rules="formRules3" title-align="right" title-width="60">
                        <vxe-form-item title="基本信息" span="24" title-align="left" title-width="200px"
                                       :title-prefix="{icon: 'fa fa-address-card-o'}"></vxe-form-item>
                        <vxe-form-item title="名称" field="name" span="12"
                                       :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
                        <vxe-form-item title="昵称" field="nickname" span="12"
                                       :item-render="{name: 'input', attrs: {placeholder: '请输入昵称'}}"></vxe-form-item>
                        <vxe-form-item title="性别" field="sex" span="12"
                                       :item-render="{name: '$select', options: sexList}"></vxe-form-item>
                        <vxe-form-item title="年龄" field="age" span="12"
                                       :item-render="{name: 'input', attrs: {type: 'number', placeholder: '请输入年龄'}}"></vxe-form-item>
                        <vxe-form-item title="其他信息" span="24" title-align="left" title-width="200px"
                                       :title-prefix="{icon: 'fa fa-info-circle'}"></vxe-form-item>
                        <vxe-form-item title="地址" field="address" span="24"
                                       :item-render="{name: 'textarea', attrs: {placeholder: '请输入地址'}}"></vxe-form-item>
                        <vxe-form-item align="center" span="24">
                            <template v-slot>
                                <vxe-button type="submit" status="primary">提交</vxe-button>
                                <vxe-button type="reset">重置</vxe-button>
                            </template>
                        </vxe-form-item>
                    </vxe-form>
                </template>
            </vxe-modal>
            <h3>阻止关闭</h3>
            <vxe-button @click="value10 = true">阻止关闭</vxe-button>
            <vxe-modal v-model="value10" title="阻止关闭" width="800" height="400" :before-hide-method="beforeHideMethod"
                       show-zoom resize>
                <template v-slot>
                    <vxe-table
                            border
                            resizable
                            show-overflow
                            auto-resize
                            height="auto"
                            :sync-resize="value10"
                            :data="tableData">
                        <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
                        <vxe-table-column field="name" title="姓名"></vxe-table-column>
                        <vxe-table-column field="sex" title="性别"></vxe-table-column>
                        <vxe-table-column field="age" title="年龄"></vxe-table-column>
                    </vxe-table>
                </template>
            </vxe-modal>
            <h3>完整功能的窗口</h3>
            <vxe-button @click="value11 = true">完整功能的窗口（移动、拖动、状态保存）</vxe-button>
            <vxe-modal v-model="value11" id="myModal6" width="800" height="400" min-width="460" min-height="320"
                       show-zoom resize remember storage transfer>
                <template v-slot:title>
                    <span style="color: red;">完整功能的窗口（移动、拖动、状态保存）</span>
                    <span style="color: red;">通过设置 transfer 将弹框容器插入 body</span>
                </template>
                <template v-slot>
                    <vxe-grid
                            border
                            resizable
                            show-overflow
                            auto-resize
                            height="auto"
                            :sync-resize="value11"
                            :pager-config="tablePage"
                            :proxy-config="tableProxy"
                            :columns="tableColumn"
                            :toolbar-config="tableToolbar"></vxe-grid>
                </template>
            </vxe-modal>
        </div>
    </template>
</div>
</body>

<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>

2. main.css代码

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");

.vxe-textarea--inner {
    line-height: inherit;
}

3. main.js代码

var Main = {
    data() {
        return {
            tableData: [
                {"name": "mayanan", "age": 29, "sex": "男"},
                {"name": "mayanan", "age": 29, "sex": "男"},
                {"name": "mayanan", "age": 29, "sex": "男"},
                {"name": "mayanan", "age": 29, "sex": "男"},
                {"name": "mayanan", "age": 29, "sex": "男"},
                {"name": "mayanan", "age": 29, "sex": "男"},
                {"name": "mayanan", "age": 29, "sex": "男"},
                {"name": "mayanan", "age": 29, "sex": "男"},
            ],
            value5: false,
            value8: false,
            value10: false,
            value11: false,
            sexList: [
                {label: '', value: ''},
                {label: '女', value: '0'},
                {label: '男', value: '1'}
            ],
            formData3: {
                name: '',
                nickname: '',
                sex: '',
                age: 26,
                address: null
            },
            formRules3: {
                name: [
                    {required: true, message: '请输入名称'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符'}
                ],
                nickname: [
                    {required: true, message: '请输入昵称'}
                ],
                sex: [
                    {required: true, message: '请选择性别'}
                ]
            },
            tablePage: {
                pageSize: 10
            },
            tableProxy: {
                props: {
                    result: 'result',
                    total: 'page.total'
                },
                ajax: {
                    // query: ({page}) => XEAjax.get('/api/user/page/list/${page.pageSize}/${page.currentPage}')
                }
            },
            tableToolbar: {
                buttons: [
                    {code: 'myBtn1', name: '按钮1'},
                    {code: 'myBtn2', name: '按钮2'}
                ],
                refresh: true,
                custom: true
            },
            tableColumn: [
                {type: 'checkbox', width: 50},
                {type: 'seq', width: 60},
                {field: 'name', title: 'Name'},
                {field: 'nickname', title: 'Nickname'},
                {
                    field: 'role',
                    title: 'Role',
                    filters: [
                        {
                            label: '前端',
                            value: '前端'
                        },
                        {
                            label: '后端',
                            value: '后端'
                        }
                    ]
                },
                {field: 'describe', title: 'Describe'}
            ]
        }
    },
    created() {
        // this.tableData = window.MOCK_DATA_LIST.slice(0, 8)
    },
    methods: {
        async beforeHideMethod() {
            const type = await this.$XModal.confirm('您确定要关闭吗？');
            if (type === 'confirm') {
                this.$XModal.message({message: `允许关闭 ${type}`, status: 'success'})
            } else {
                this.$XModal.message({message: `禁止关闭 ${type}`, status: 'error'});
                return new Error()
            }
        },
        confirmEvent() {
            this.$XModal.confirm('您确定要删除吗？').then(type => {
                this.$XModal.message({message: `点击了 ${type}`})
            })
        }
    }
};

var app = new Vue(Main).$mount('#app');
// 给 vue 实例挂载内部对象，例如
Vue.prototype.$XModal = VXETable.modal;
Vue.prototype.$XPrint = VXETable.print;
Vue.prototype.$XSaveFile = VXETable.saveFile;
Vue.prototype.$XReadFile = VXETable.readFile;

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^