Vue中的vxe-table教程3-尺寸、序号、列宽、自动换行、斑马线、边框、圆角、单元格样式、页脚添加合计-CSDN博客

本文链接：https://blog.csdn.net/weixin_42289273/article/details/112375672

知识点：尺寸、序号、列宽、自动换行、斑马线、边框、圆角、单元格样式、页脚添加合计

1. 先上效果图：

2. 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="allAlign = 'left'">居左</vxe-button>
                    <vxe-button @click="allAlign = 'center'">居中</vxe-button>
                    <vxe-button @click="allAlign = 'right'">居右</vxe-button>
                </template>
            </vxe-toolbar>

            <!--            border: 加边框-->
            <!--            show-header-overflow: 表头超过宽度隐藏-->
            <!--            show-overflow: 表格数据超过宽度隐藏-->
            <!--            highlight-hover-row: 表格行的hover事件-->
            <!--            size="medium/small/mini": 表格内容字体大小设置-->
            <!--            height="400": 表格的高度-->
            <!--            :seq-config="{startIndex: 100}": 自定义起始序列号-->
            <!--            :seq-config="{seqMethod: seqMethod}": 自定义方法返回序列号-->
            <!--            stripe: 为表格添加斑马线-->
            <!--            border="outer/inner/none": 设置外边框/内边框/无边框-->
            <!--            round: 设置圆角边框-->
            <!--
            min-width：属性，设置最小宽度，实现等比例放大
            <vxe-table-column field="name" title="姓名" min-width="200"></vxe-table-column>
            width: 属性还可以设置百分比
            <vxe-table-column field="name" title="姓名" width="25%"></vxe-table-column>
            提示信息
            <vxe-table-column field="name" title="姓名" :title-help="{message: '请输入您的名字'}"></vxe-table-column>
            -->
            <vxe-table
                    class="mytable-style"
                    :header-cell-class-name="headerCellClass"
                    :row-class-name="rowClassName"
                    show-header-overflow
                    border
                    stripe
                    round
                    show-overflow
                    highlight-hover-row
                    size="medium"
                    height="440"
                    show-footer
                    :footer-method="footerMethod"
                    :seq-config="{startIndex: 0}"
                    :align="allAlign"
                    :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">
<style>
    tfoot{
        background-color: #2db7f5;
        color:#ffffff;
        font-weight: bold;
    }
</style>

</html>

3. main.css中的代码

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

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


.mytable-style .vxe-header--column.col-blue {
    background-color: #2db7f5;
    color: #fff;
}
.mytable-style .vxe-body--row.row-red {
    background-color: #2db7f5;
    color: #fff;
}

4. main.js中的代码

var Main = {
    data() {
        return {
            allAlign: "center",
            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}) {
            const footerData = [
                columns.map((column, columnIndex) => {
                    if (columnIndex === 0) {
                        return '合计'
                    }
                    if (['date'].includes(column.property)) {
                        return '2020-09-05'
                    }
                    if (['age'].includes(column.property)) {
                        return 888
                    }
                    return null
                })
            ];
            return footerData
        },
        headerCellClass() {
            return 'col-blue'
        },
        rowClassName({row}) {
            if (row.name === "test4") {
                return 'row-red'
            }
        },
        // cellClassName({row, column}) {
        //     if (row === this.selectRow & column === this.selectColumn) {
        //         return 'col-orange'
        //     }
        // },
        // cellClickEvent({row, column}) {
        //     this.selectRow = row;
        //     this.selectColumn = column
        // }
    },
};

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