el-table 如何实现行列转置?

在某些需求里需要用到 行列转置 的表格,但 el-table 提供的基本表格是不支持行列转置的,这样就需要对这个表格进行二次开发。下面来看具体实现的效果:

具体实现方式

基本原理就是对原有的可渲染的数据结构进行处理,表头与表格数据要按动态的数据去处理。这里我们提供了两种方式去实现:

原数据格式:

复制代码
tableHead:  [
      {
        prop: 'date',
        label: '日期',
      },
      {
        prop: 'name',
        label: '姓名',
      },
      {
        prop: 'address',
        label: '地址',
      },
    ],
tableData: [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }
    ]

第一种:

初始化页面时对数据进行手动循环处理,html 部分借助 template 渲染,缺点是处理略复杂,具体代码如下(只摘抄了关键代码,省略了 vue 的基本结构):

复制代码
<el-table 
    border
    :data="tableDataNew" 
  >
    <el-table-column
      v-for="(item, index) in columnData"
      :key="index"
      :prop="item.prop"
      :label="item.label"
    >
      <template slot-scope="{ row }">
        <div>
          {{ row[item.prop] }}
        </div>
      </template>
    </el-table-column>
  </el-table>

     mounted(){
      this.init()
    },
	init() {
        const columnObj = {} //创建标题数组中第一个对象
        columnObj.label = '日期'//第一个标题名称
        columnObj.prop = 'title'//第一个标题名称对应的字段

        this.columnData.push(columnObj) //第一个标题 放入标题数组中
        this.tableDataNew.push({ 'title': '姓名' })
        this.tableDataNew.push({ 'title': '地址' })
        
        let _this = this;
        var props = 'prop' //自定义字段名称
        this.tableData.forEach((item, index) => {
          const columnObj = {}
          columnObj.label = item.date// 每一列的标题的名称
          columnObj.prop = props + index //自定义每一列标题字段名称
          _this.columnData.push(columnObj)

          this.$set(this.tableDataNew[0], columnObj.prop, item.name)
          this.$set(this.tableDataNew[1], columnObj.prop, item.address)
        })
      }

第二种:

借助 computed 计算属性、 reduce 函数实现数据处理,但是隐藏了原来的表头,增加了样式处理的成本,优点是处理逻辑比较简单。

复制代码
<el-table
      style="width: 100%"
      :data="tableDataNew"
      :show-header="false"
    >
      <el-table-column
        v-for="(item, index) in columnData"
        :key="index"
        :prop="item"
      >
      </el-table-column>
    </el-table>
    computed: {
      columnData() {
        return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
      },
      tableDataNew() {
        return this.tableHead.map(item => {
          return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label});
        });
      }
    },

处理之后的表格数据格式:

复制代码
columnData:
 ["title", "value0", "value1", "value2", "value3"]

tableDataNew:
 ["title", "value0", "value1", "value2", "value3"] 

到这里两种方式就介绍完了,大家可以尝试,如果有更好的方式,欢迎大家不吝赐教。

相关推荐
前端君3 小时前
实现最大异步并发执行队列
javascript
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军6 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy6 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端6 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿6 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL6 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉6 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~6 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js