效果图：

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;

 

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

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue