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月"

}]

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

相关推荐
北海-cherish17 分钟前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch1 小时前
网球馆自动预约系统的反调试
javascript·网络
新中地GIS开发老师3 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang3 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。3 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。3 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡3 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_3 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含3 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
你的人类朋友3 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端