el-table 纵向垂直表头处理

项目中表格展示会遇到需要纵向垂直表头情况,下面,我们基于el-table组件来实现这种表格。

以下是这次需要用到的数据表格,已知左侧违章名称是固定的,而月份是不固定的,在后端返回数据格式已确定的情况下,需要将左侧作为表头展示。

第一步


复制代码
先将 el-table 进行编辑,el-table 中的 data 属性数据我们需要进行重新处理,将原来的数据进行纵横转换,这一步理解起来会比较复杂。放到 js 中去讲解
复制代码
<el-table v-else ref="tableRef" :data="getIValues" :show-header="false" border>

    <el-table-column v-for="(item, index) in getIHeaders" :key="index" :prop="item" align="center"> </el-table-column>

</el-table>

第二步


复制代码
数据配置 数据我们需要单独配一次 headers,将原来的表头改成数据动态生成的方式。这个表头的配置需要按照实际数据的 键 与 名称 进行对应。最终渲染时由 第三步 的 getHeaders 来提供数据。具体 getHeaders 要做什么,我们第三步来讲解
复制代码
const iHeaders = ref([

  {

    prop: 'month',

    label: '违章名称'

  },

  {

    prop: 'tiredNumber',

    label: '疲劳驾驶'

  },

  {

    prop: 'overspeedNumberMax',

    label: '超速(>10%)'

  },

  {

    prop: 'overspeedNumberMin',

    label: '超速(≤10%)'

  },

  {

    prop: 'trafficViolationsNumber',

    label: '交通违章'

  },

  {

    prop: 'otherNumber',

    label: '其他'

  }

])

第三步


复制代码
getHeaders 与 getValues

这两个函数我们做计算属性直接使用即可
复制代码
const getIHeaders = computed(() => {

  return illegalData.value.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])

})

const getIValues = computed(() => {

  return iHeaders.value.map(item => {

    return illegalData.value.reduce((pre, cur, index) => Object.assign(pre, { ['value' + index]: cur[item.prop] }), { title: item.label })

  })

})

getHeaders:

先看打印结果:[ "title", "value0", "value1", "value2" ]

可能你不明白为什么要这么做,想象一下,原来的纵表改为横表以后,我们的第一列就是 title 第二列开始往后都将是 value 但是我们并不知道有多少个 value,所以我们需要通过这种方式来动态的去生成表头,不能使用原来的表头了

既然表头通过[ "title", "value0", "value1", "value2" ]这个表头定死了,也就意味着我们的数据结果,也必须以这种名字来命名。同时也需要想到 数组中的每个属性就对应的是一列

getValues:

先看打印结果[{

"title": "违章名称",

"value0": "2024年08月",

"value1": "2024年09月",

"value2": "2024年10月"

}]

通过我们的纵横转换以后,我们的数据结果将会变为 数组中的每一个对象都将是一行,每一个属性都将是一列。

相关推荐
独立开阀者_FwtCoder13 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士14 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
Hilaku21 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿21 分钟前
Js事件循环
javascript
datagear22 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
艾克马斯奎普特29 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
namehu30 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
MR_发31 分钟前
万字实现带@和表情包的输入框
vue.js·typescript
多啦C梦a32 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
yvvvy1 小时前
# React Hooks 全面解析:从 useState 到 useEffect,掌握状态与副作用管理
javascript