vue实现动态表头

最新推荐文章于 2024-08-03 23:22:49 发布
最新推荐文章于 2024-08-03 23:22:49 发布
阅读量178 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71843547/article/details/132755870
版权

获取返回数据类型：

{
  "code": 200,
  "message": "查询成功",
  "data": [
    {
      "opDate": "2023-08-01",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 17901.49
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 3233.3
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 4201.845
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-02",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 16715.63
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 3255.289
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-03",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 17483.12
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 4101.407
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-04",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 14570.18
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 2897.257
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-05",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 4942.47
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 1470.994
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-06",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 8188.58
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 2998.148
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-07",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 12675.62
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 3014.079
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-08",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 17289.77
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 3957.453
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-09",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 182
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 3942.195
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-10",
      "supplierDayList": [
        {
          "supplierName": "供应商测试2",
          "totalPrice": 2214.488
        },
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 0
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-11",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 15279.13
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 25409.28
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 2585.916
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 19752.5
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-12",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 6472.06
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 1916.48
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 1903.768
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-13",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 8031.59
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 1138.5
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 2389.872
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-14",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 13376.35
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 5629.42
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 3341.525
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-15",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 14364.68
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 3528.46
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 3444.371
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    },
    {
      "opDate": "2023-08-16",
      "supplierDayList": [
        {
          "supplierName": "河南汇群福商贸有限公司",
          "totalPrice": 14603.885
        },
        {
          "supplierName": "河南鹏旭食品有限公司",
          "totalPrice": 4783.3
        },
        {
          "supplierName": "供应商测试2",
          "totalPrice": 4119
        },
        {
          "supplierName": "供应商测试3",
          "totalPrice": 0
        }
      ],
      "mcateDayList": null
    }
  ]
}

 在vuex中的actions调用接口，获取后端传过来的数据：

actions:{
        // 获取表格显示信息
        getInTotalActions({state,commit}){
            axios.get('/common/report/getSupplierData',{params:state.pageInfo}).then(response =>{
                if(response.code === 200){
                    commit('getSupplierList',response.data)
                    Message({
                        message:response.message,
                        type:'success'
                    })
                }else{
                    Message({
                        message:response.message,
                        type:'error'
                    })
                }
            })
        },
    }

在vuex的mutations处理我们所获取到的数据:

 // 获取表格信息
        getSupplierList(state,list){
            state.transformedData = null
            state.tableHead = []  //这里需要附空，否则数据会出现累加
            state.transformedData = list
            let selectState = list[0].supplierDayList
            selectState.forEach((item,index) => {
                //这里是循环数据得到的动态表头
                state.tableHead.push({index:index,property:'supplierDayList',label:item.supplierName})
            });
            const anotherTableHead = [
                {
                    label:'日期'+"\\"+'供应商',
                    property:'opDate'
                }
            ]
            state.tableHead = [...anotherTableHead,...state.tableHead]
        },

vuex中的state用来存储数据：

state:{
        transformedData:null,
        pageInfo:{
            beginTime:null,
            endTime:null,
        },
        tableHead:[],
    },

在我们的vue页面中的script调用vuex：

import {mapState , mapActions} from 'vuex';
...
computed:{
        ...mapState('vendor',['pageInfo','transformedData','tableHead'])
    },
    methods:{
        ...mapActions('vendor',['getInTotalActions']),
    }

在vue页面的template进行渲染表格：

<!-- 表格 -->
        <el-table :data="transformedData" border id="out-table">
            <el-table-column v-for="(item,index) in tableHead" :key="index" :label="item.label" :property="item.property" :index="item.index" align="center">
                <template slot-scope="scope">
                    <div>
                        <p v-if="scope.column.property !='supplierDayList'">{{ scope.row[scope.column.property] }}</p>
                        <p v-else>{{ scope.row[scope.column.property][scope.column.index].totalPrice }}</p>
                    </div>
                </template>
            </el-table-column>
        </el-table>

最终显示结果如下：

故事说给山鬼听
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue表格实现固定表头首列
11-02
在实现固定表头和首列的表格时，我们将利用Vue的这两个特性来构建可复用的组件。 1. **数据绑定**：Vue中的数据绑定允许我们创建动态视图。在表格中，我们可以将数据存储在一个数组中，然后通过`v-for`指令遍历这个...
vue element 中的table动态渲染实现（动态表头）
10-15
本文将深入探讨如何在Vue Element环境中实现表格的动态渲染，特别是动态表头的功能。 首先，动态渲染的核心在于能够根据不同的数据源自动生成对应的表格结构。在Element UI的`el-table`组件中，我们可以通过`v-for`...
原来这么简单！Vue实现动态表头详细步骤
七一
02-16 1220
至于接下来，勾选状态下的具体操作，我就不一一列举了。关键代码：放入你项目中合适的位置。
vue el-table实现动态表头
热门推荐
qq_45093219的博客
09-30 1万+
el-table实现动态表头
使用 Ant Design Vue 实现动态表头与数据填充
Programming Talk
06-04 813
通过可以自定义单元格内容的渲染方式。例如，我们可以为某些字段添加链接或按钮。title: '操作',});在<template><a-button @click="handleEdit(record)">编辑</a-button></a-table><script>props: {data: {},data() {return {},watch: {data: {},deep: true},methods: {});});
antd vue 动态创建表头
陌桑楚客
01-04 1245
//动态创建表头 createTableHeader(data) { let titleHeader = data[0];//data 后台数据 titleHeader.tableDataTotalVoList.map((item, index) => { const obj = { title: item.title, align: 'left', childr..
如何在Ant-Design-Vue中实现动态表头并填充数据
06-06 1035
在现代前端开发中，基于Vue.js的Ant Design Vue已经成为许多开发者构建高质量用户界面的首选工具之一。它提供了一整套丰富的UI组件，其中的Table组件广泛应用于数据展示和操作。本文将深入探讨如何在Ant Design Vue中实现动态表头并填充数据，以满足复杂多变的业务需求。
vue+element-ui 实现动态表头
happysmartgirl的博客
02-20 442
在项目中，遇到了不固定表头，记录一下。
Vue+Ant实现动态表头
weixin_51465537的博客
02-27 470
1.获取monthRate中月份；2.根据monthRate中的key,显示对应的value,其中使用dataIndex的时候，table表中不显示对应的value值，因此又使用了customRender函数进行渲染获取。根据所选月份，异步获取月份数据，渲染生成动态表头、表格。，以渲染分组表头，进行分组。
使用 Ant Design Vue 实现动态表头并填充数据的表格组件
Kimi2024的博客
06-06 808
表格数据是一个数组，其中每个元素都是一个对象，包含 `id`、`name`、`age` 和 `address` 四个字段。表头数据是一个数组，其中每个元素都是一个对象，包含 `title`、`dataIndex`、`key` 三个字段。`title` 属性表示表头标题，`dataIndex` 属性表示数据字段，`key` 属性用于唯一标识表头。首先，定义一个 `data` 属性，用于存储表格数据。在上面的代码中，我们使用了 `rowKey="id"`，表示以 `id` 字段作为表格行的主键。
【Ant-Design-Vue】4、动态表头的实现
weixin_52938153的博客
06-10 478
Anti-Design-Vue 是一个基于 Vue.js 的 UI 组件库，旨在提供一套设计反模式的组件，以帮助开发者创建独特且具有反传统风格的用户界面。与典型的 UI 设计模式不同，Anti-Design-Vue 强调打破常规，通过不对称布局、大胆的色彩搭配和意想不到的交互效果，来吸引用户的注意力和兴趣。其组件库包含各种按钮、表单、导航栏和卡片等，均支持高度定制化。开发者可以轻松集成这些组件，并通过丰富的 API 和灵活的主题配置，实现个性化的设计风格。Anti-Design-Vue 适用于那些希望在视觉
使用Ant-Design-Vue实现动态表头与数据填充的实战指南
Kimi2024的博客
06-07 616
**表头（columns）**：我们定义了一个数组，其中每个对象包含`title`、`dataIndex`和`key`。`title`是表头显示的文字，`dataIndex`对应数据中的字段，`key`是唯一标识符。- **动态填充**：在`mounted`钩子中，我们模拟了一个API请求来获取表头和数据，并将其赋值给组件的`columns`和`data`。- **数据（dataSource）**：数据是一个对象数组，每个对象对应表格中的一行。// 模拟API请求。1. **定义动态表头和数据**
Vue+Element ui 根据后台返回数据设置动态表头操作
10-14
以上就是Vue+Element UI根据后台返回数据设置动态表头的两种常见方法，以及如何实现表头过滤功能并重新向后台获取数据的示例。这些技巧能够帮助开发者更灵活地处理后端返回的动态数据，创建适应性强的表格组件。
vue+element-ui动态生成多级表头的方法
10-18
标题中的“vue+element-ui动态生成多级表头的方法”是指在Vue.js应用程序中使用Element-UI库来创建一个能够根据数据动态展示多级表头的表格组件。Element-UI是一个流行的前端UI框架，它提供了丰富的组件库，适用于...
vue3 二次组件封装【透传】
最新发布
小学都hold不住的工程shi
08-03 114
【代码】vue3 二次组件封装【透传】
JAVA毕业设计|ssm基于java的健身房管理系统的设计与实现vue包含文档代码讲解
2401_86480677的博客
08-03 187
前面提到的系统分析，系统设计最主要还是进行功能，系统操作逻辑的设计，也包括了存储数据的数据库方面的设计等内容，系统实现就是一个最终的实施阶段，将前面的设计成果进行物理转化，最终出具可以运用于实际的软件系统。如图5.4显示的就是健身器材列表页面，此页面提供给管理员的功能有：对全部的健身器材的一个管理、可以根据健身器材名称进行模糊查询、根据时间区间来进行判断器材的是否损坏。如图5.1显示的就是会员管理页面，此页面提供给管理员的功能有：对会员信息的一个管理，不同会员看到的页面是不一样的，会员信息也是不同的.
vue在Index.html中自定义全局变量
lllomh的博客
08-03 93
在inde.html定义整个项目都能访问的变量,用于判断等等。我这里是 赋值了 环境值. 可以改变任意值都行.当webpack覆盖不到的地方用这这个方便的.直接在 index.html中 js。要用的地方直接判断就行。
视频教程 - 自研Vue3 Tree组件高级功能：虚拟滚动新增节点实现自动滚动
felix_alone2012的博客
08-03 75
感谢小伙伴们对本套自研vue3 tree组件教程的关注，在前一篇《媲美Element Plus JuanTree终极实战：虚拟滚动》的功能演示中发现了小bug，特地整理了相关录屏来说明怎么一步步解决bug的，来回馈小伙伴们的支持。
ant design vue 表格动态表头
09-08
Ant Design Vue 表格的动态表头可以通过以下步骤实现： 1. 定义表格列的数组，其中每个列对象包含 `title` 属性和 `key` 属性，如下所示： ``` columns: [ { title: '姓名', key: 'name' }, { title: '年龄'...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值