Vue中的vxe-table教程24-高级表格-完整查询功能

效果图：1. index.html代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title>&l

专职

4630人浏览 · 2021-01-15 18:21:27

专职 · 2021-01-15 18:21:27 发布

效果图：

1. index.html代码

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

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

<body>
<div id="app">
    <template>
        <div style="padding: 0 50px 0 50px">
            <vxe-grid ref="xGrid" v-bind="gridOptions">
                <!--将表单放在工具栏中-->
                <template v-slot:toolbar_buttons>
                    <vxe-form :data="formData" @submit="searchEvent" @reset="searchEvent">
                        <!-- 搜索的字段 -->
                        <vxe-form-item field="name"
                                       :item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
                        <vxe-form-item
                                :item-render="{ name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] }"></vxe-form-item>
                    </vxe-form>
                </template>

                <!--自定义空数据模板-->
                <template v-slot:empty>
                    <span style="color: red;">
                        <img src="/vxe-table/static/other/img1.gif">
                        <p>没有更多数据了！</p>
                    </span>
                </template>
            </vxe-grid>
        </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");

3. main.js代码

var Main = {
    data() {
        return {
            formData: {
                name: '',
            },
            gridOptions: {
                resizable: true,
                showOverflow: true,
                border: 'inner',
                height: 548,
                rowId: 'id',
                printConfig: {
                    columns: [
                        {field: 'id'},
                        {field: 'name'},
                        {field: 'email'},
                        {field: 'nickname'},
                        {field: 'age'},
                        {field: 'role'},
                        {field: 'amount'},
                        {field: 'updateDate'},
                        {field: 'createDate'},
                    ],
                    modes: ['current', 'selected', 'all']
                },
                sortConfig: {
                    trigger: 'cell',
                    remote: true,
                    defaultSort: {
                        field: 'name',
                        order: 'desc'
                    }
                },
                filterConfig: {
                    remote: true
                },
                pagerConfig: {
                    // perfect: true,
                    pageSize: 10,
                    pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
                },
                exportConfig: {
                    // 默认选中类型
                    type: 'xlsx',
                    // 局部自定义类型
                    types: ['xlsx', 'csv', 'html', 'xml', 'txt', 'pdf'],
                    // 自定义数据量列表
                    modes: ['current', 'selected', 'all']
                },
                checkboxConfig: {
                    labelField: 'id',
                    reserve: true,  // 分页场景下，继续保留选中状态
                    highlight: true,
                    range: true
                },
                proxyConfig: {
                    seq: true, // 启用动态序号代理
                    sort: true, // 启用排序代理
                    filter: true, // 启用筛选代理
                    props: {
                        result: 'result', // 配置响应结果列表字段
                        total: 'page.total' // 配置响应结果总页数字段
                    },
                    ajax: {
                        // 接收 Promise 对象
                        query: ({page, sorts, filters}) => {
                            const queryParams = Object.assign({}, this.formData);
                            // 处理排序条件
                            const firstSort = sorts[0];
                            if (firstSort) {
                                queryParams.sort = firstSort.property;
                                queryParams.order = firstSort.order
                            }
                            // 处理筛选条件
                            filters.forEach(({property, values}) => {
                                queryParams[property] = values.join(',')
                            });
                            return XEAjax.get(`https://api.xuliangzhan.com:10443/api/pub/page/list/${page.pageSize}/${page.currentPage}`, queryParams)
                        },
                        // 被某些特殊功能所触发，例如：导出数据 mode=all 时，会触发该方法并对返回的数据进行导出
                        queryAll: () => XEAjax.get('https://api.xuliangzhan.com:10443/api/pub/all')
                    }
                },
                toolbarConfig: {
                    export: true,
                    print: true,
                    custom: true,
                    zoom: true,
                    slots: {
                        buttons: 'toolbar_buttons'
                    }
                },
                columns: [
                    {type: 'seq', width: 60, fixed: 'left', title: '序号'},
                    {type: 'checkbox', title: 'ID', width: 120, fixed: 'left'},
                    {field: 'name', title: '姓名', minWidth: 160, sortable: true},
                    {field: 'email', title: '邮箱', minWidth: 160, editRender: {name: 'input'}},
                    {field: 'nickname', title: '昵称', sortable: true, minWidth: 160},
                    {field: 'age', title: '年龄', visible: false, sortable: true, width: 100},
                    {
                        field: 'role',
                        title: '职位',
                        sortable: true,
                        minWidth: 160,
                        filters: [
                            {label: '前端开发', value: '前端', checked: true},
                            {label: '后端开发', value: '后端'},
                            {label: '测试', value: '测试'},
                            {label: '程序员鼓励师', value: '程序员鼓励师'}
                        ],
                        filterMultiple: false
                    },
                    {field: 'amount', title: '收入', width: 140, formatter: this.formatAmount},
                    {
                        field: 'updateDate',
                        title: '更新时间',
                        visible: false,
                        width: 160,
                        sortable: true,
                        formatter: this.formatDate
                    },
                    {
                        field: 'createDate',
                        title: '创建时间',
                        visible: false,
                        width: 160,
                        sortable: true,
                        formatter: this.formatDate
                    }
                ]
            }
        }
    },
    created() {

    },
    methods: {
        searchEvent() {
            this.$refs.xGrid.commitProxy('reload')
        },
        formatAmount({cellValue}) {
            return cellValue ? `￥${XEUtils.commafy(XEUtils.toNumber(cellValue), {digits: 2})}` : ''
        },
        formatDate({cellValue}) {
            return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
        }
    }
};

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}$/, //不连续的两位字母// /^