el-table的横向表头转为纵向表头

最新推荐文章于 2024-10-21 08:00:00 发布

m0_54030706

最新推荐文章于 2024-10-21 08:00:00 发布

阅读量601

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_54030706/article/details/140102507

版权

业务：普通的el-table的表头是横向的，现在需要将表头置换成纵向，并且横向为序号排布，方便比对。也适用于比对某个产品/数目的场景

vue3 + js + element-plus

tempelate：

      <el-table
       :data="verticalHeader"
        border
        :row-style="tableRowStyle"
        :cell-style="tabelCellStyle"
        :header-cell-style="tabelHeaderStyle"
        >
      <el-table-column
      v-for="(item,index) in horizontalHeader"
      :key="index"
      :prop="item"
      :label="item"
       />
    </el-table>

const horizontalHeader = ref([])
const verticalTable = reactive([
  {prop: 'canTxFrameNum', label:t('busStatistics.total-tx')},
  {prop: 'canRxFrameNum', label:t('busStatistics.total-rx')},
  {prop: 'canErrFrameNum', label:t('busStatistics.total-err')},
  {prop: 'canTxFps', label:t('busStatistics.tx-fr/s')},
  {prop: 'canRxFps', label:t('busStatistics.rx-fr/s')},
  {prop: 'canErrFps', label:t('busStatistics.err-fr/s')},
  {prop: 'occupyRate', label:t('busStatistics.bus-load')}
])//label:就是你的表头标签，这里由于我的是多语言设置，所以我用‘t’来表示
let verticalHeader = ref([])
let statisticsData = ref([])

const getHeaders = () => {
  horizontalHeader.value = statisticsData.value.reduce(
    (pre, cur, index) => pre.concat(`${index + 1}`), [t('busStatistics.ability')])
  return horizontalHeader.value
}

const getValues = computed(() => {
  const value = verticalTable.map(item => {
    const itemValues = {}
    statisticsData.value.forEach(cur => {
      itemValues[cur.index] = cur.channelStatistics[item.prop]
    })
    return Object.assign(itemValues, { [t('busStatistics.ability')]: item.label })
  })//这里的“t('busStatistics.ability')”就是你的横向表头，也就是你需要比对的序号名称
  return value
})