element动态表格之自定义固定列、排序、筛选、导出等

最新推荐文章于 2024-07-30 08:28:18 发布

御风傲天

最新推荐文章于 2024-07-30 08:28:18 发布

阅读量1.2k

点赞数 2

分类专栏： VUE 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/yufengaotian/article/details/121538032

版权

这篇博客介绍了如何在Vue.js项目中使用Element UI库来实现动态表格功能，包括自定义固定列、数据排序、筛选操作以及数据导出。前端界面展示了一个基于后端返回的JSON数据生成的表格。开发者需要注意在使用filters和filter-method时，当不需要它们时，应设置为null以避免错误。同时，文章也提供了相关的API介绍和源码定义。

摘要由CSDN通过智能技术生成

前端界面如下：

后端返回数据：json

{
    "items": {
        "table_body": [
            {
                "time": "2021-11-19",
                "charge_type": "vmware vm",
                "pay_type": "转售付费",
                "instance_name": "100.100.82.54",
                "des_host": "100.100.82.54",
                "platform": "vCenter",
                "app_name": "应用系统1",
                "dep_name": "部门1",
                "item_name": "各类cpu",
                "price": 233,
                "used_unit": "台",
                "used": 1,
                "total_cost": 233
            },
            {
                "time": "2021-11-19",
                "charge_type": "vmware vm",
                "pay_type": "转售付费",
                "instance_name": "VCSA_7_0",
                "des_host": null,
                "platform": "vCenter",
                "app_name": "无系统",
                "dep_name": "无部门",
                "item_name": "各类cpu",
                "price": 233,
                "used_unit": "核",
                "used": 2,
                "total_cost": 466
            },
            {
                "time": "2021-11-19",
                "charge_type": "vmware vm",
                "pay_type": "转售付费",
                "instance_name": "VCSA70",
                "des_host": null,
                "platform": "vCenter",
                "app_name": "无系统",
                "dep_name": "无部门",
                "item_name": "各类cpu",
                "price": 233,
                "used_unit": "核",
                "used": 2,
                "total_cost": 466
            },
            {
                "time": "2021-11-19",
                "charge_type": "vmware vm",
                "pay_type": "转售付费",
                "instance_name": "vCLS (1)",
                "des_host": null,
                "platform": "vCenter",
                "app_name": "无系统",
                "dep_name": "无部门",
                "item_name": "各类cpu",
                "price": 233,
                "used_unit": "核",
                "used": 1,
                "total_cost": 233
            },
            {
                "time": "2021-11-19",
                "charge_type": "分区",
                "pay_type": "转售付费",
                "instance_name": "vyos-1.4-tf-bms-leaf",
                "des_host": null,
                "platform": "HMC",
                "app_name": "无系统",
                "dep_name": "无部门",
                "item_name": "cpu.lpar",
                "price": 123,
                "used_unit": "核",
                "used": 2,
                "total_cost": 246
            },
            {
                "time": "2021-11-19",
                "charge_type": "分区",
                "pay_type": "转售付费",
                "instance_name": "wj-02",
                "des_host": null,
                "platform": "HMC",
                "app_name": "无系统",
                "dep_name": "无部门",
                "item_name": "cpu.lpar",
                "price": 123,
                "used_unit": "核",
                "used": 2,
                "total_cost": 246
            },
            {
                "time": "2021-11-19",
                "charge_type": "分区",
                "pay_type": "转售付费",
                "instance_name": "wj-01",
                "des_host": null,
                "platform": "HMC",
                "app_name": "无系统",
                "dep_name": "无部门",
                "item_name": "cpu.lpar",
                "price": 123,
                "used_unit": "核",
                "used": 2,
                "total_cost": 246
            },
            {
                "time": "2021-11-19",