首页 > 其他分享> > Vue中的vxe-table基本使用教程5

Vue中的vxe-table基本使用教程5

2021-01-11 16:59:49 作者：互联网

知识点：

显示或隐藏表头
表格列宽拖动
表格高度自适应可以设置表格最大高度值
页脚追加量两行，一行平均值、一行求和

效果图：

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>
    <!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>

<body>
<div id="app">
    <template>
        <div style="padding: 0 50px">
            <vxe-toolbar>
                <template v-slot:buttons>
                    <vxe-button @click="showHeader = !showHeader">显示/隐藏表头</vxe-button>
                </template>
            </vxe-toolbar>
            <!--
            1. 显示或隐藏表头使用参数：
            :show-header="showHeader"
            2. 表格列宽拖动使用参数
            resizable
            3. 表格高度自适应时可以设置最大高度
            max-height="450"或max-height="100"
            4. 表格末尾加入两行数据一个平均值，一个求和,详见main.js文件中的footerMethod方法
            也就是xeutils中的求和求平均值函数的用法
            -->
            <vxe-table
                    border
                    highlight-hover-row
                    :show-header="showHeader"
                    resizable
                    show-overflow
                    max-height="450"
                    class="mytable-scrollbar"
                    show-footer
                    :footer-method="footerMethod"
                    :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-column field="date" title="日期"></vxe-table-column>
                <vxe-table-column field="address" title="地址"></vxe-table-column>
            </vxe-table>
        </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: [],
            showHeader: true
        }
    },
    created() {
        var list = [];
        for (var index = 0; index < 5; index++) {
            list.push({
                name: 'test' + index,
                role: 'developer',
                sex: '男',
                age: index + 18,
                date: '2019-05-01',
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: '河北省保定市易县裴山镇南庄村酒厂大渠往西的向阳村居委会' + index
            })
        }
        this.tableData = list
    },
    methods: {
        footerMethod({columns, data}) {
            const means = [];
            const sums = [];
            columns.forEach((column, columnIndex) => {
                if (columnIndex === 0) {
                    means.push('平均');
                    sums.push('和值');
                } else {
                    let meanCell = null;
                    let sumCell = null;
                    switch (column.property) {
                        case 'age':
                        case 'rate':
                            meanCell = parseInt(XEUtils.mean(data, column.property));
                            sumCell = XEUtils.sum(data, column.property);
                            break
                    }
                    means.push(meanCell);
                    sums.push(sumCell)
                }
            });
            // 返回一个二维数组的表尾合计
            return [means, sums]
        }
    }
};

var app = new Vue(Main).$mount('#app');

标签：index,Vue,means,vxe,sums,column,var,push,table
来源： https://blog.csdn.net/weixin_42289273/article/details/112476041