Vue中的vxe-table教程23-高级表格-表尾数据、导出、全屏、隐藏列_vxe-table全屏

作者：Cpp五条 | 2024-06-09 01:24:56

踩

vxe-table全屏

效果图：

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">
            <vxe-grid
                    border
                    stripe
                    resizable
                    show-overflow
                    show-footer
                    height="500"
                    :export-config="{}"
                    :toolbar-config="tableToolbar"
                    :footer-method="footerMethod"
                    :columns="tableColumn"
                    :data="tableData">
            </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代码


window.MOCK_DATA_LIST = [
    {"name": "mayanan", "sex": "男", "age": 29, "rate": 388},
    {"name": "mayanan", "sex": "男", "age": 29, "rate": 388},
    {"name": "mayanan", "sex": "男", "age": 27, "rate": 388},
    {"name": "mayanan", "sex": "男", "age": 27, "rate": 388},
    {"name": "mayanan", "sex": "男", "age": 25, "rate": 388},
    {"name": "mayanan", "sex": "男", "age": 25, "rate": 388},
];
var Main = {
    data() {
        return {
            tableColumn: [
                {type: 'seq', width: 60},
                {field: 'name', title: "姓名"},
                {field: 'sex', title: "性别"},
                {field: 'age', title: '年龄', sortable: true},
                {field: 'rate', title: '速度'}
            ],
            tableToolbar: {
                export: true,
                zoom: true,
                custom: true
            },
            tableData: []
        }
    },
    created() {
        this.tableData = window.MOCK_DATA_LIST.slice(0, 15)
    },
    methods: {
        footerMethod({columns, data}) {
            return [
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '和值'
                    }
                    if (['age', 'rate'].includes(column.property)) {
                        return XEUtils.sum(data, column.property)
                    }
                    return null
                }),
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '平均'
                    }
                    if (['age', 'rate'].includes(column.property)) {
                        return XEUtils.mean(data, column.property)
                    }
                    return null
                })
            ]
        }
    }
};
 
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;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/692024