Vue中的vxe-table教程4-水平滚动条、冻结列、页脚追加聚合统计

知识点：水平滚动条的设置左边冻结列的设置页脚加一行对指定列进行求和的设置效果如图：1. index.html中的代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://cdn

专职

6815人浏览 · 2021-01-11 15:35:41

专职 · 2021-01-11 15:35:41 发布

知识点：

水平滚动条的设置
左边冻结列的设置
页脚加一行对指定列进行求和的设置

效果如图：

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: 50px 50px 0 50px">
            <!--
            fixed="left":表示冻结左边的列
            <vxe-table-column type="seq" fixed="left" width="60" title="序号"></vxe-table-column>
            -->
            <vxe-table
                    :data="tableData"
                    height="430"
                    border
                    highlight-hover-row

                    show-overflow
                    show-footer
                    class="mytable-scrollbar"
                    :footer-method="footerMethod"
            >
                <vxe-table-column type="seq" fixed="left" width="60" title="序号"></vxe-table-column>
                <vxe-table-column field="name" title="姓名" width="250"></vxe-table-column>
                <vxe-table-column field="sex" title="性别" width="350"></vxe-table-column>
                <vxe-table-column field="age" title="年龄" width="300"></vxe-table-column>
                <vxe-table-column field="date" title="日期" width="300"></vxe-table-column>
                <vxe-table-column field="address" title="地址" width="300"></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;
}

/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
    background-color: #FFFFFF;
}

/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 5px;
    border: 1px solid #F1F1F1;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
    background-color: #A8A8A8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
    background-color: #787878;
}

/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
    background-color: #FFFFFF;
}

3. main.js中的代码

var Main = {
    data() {
        return {
            tableData: []
        }
    },
    created() {
        var list = [];
        for (var index = 0; index < 100; 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}) {
            return [
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '求和'
                    }
                    if (['age'].includes(column.property)) {
                        return parseInt(XEUtils.sum(data, column.property))
                    }
                    return '-'
                })
            ]
        }
    }
};

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

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