el-table 纵向垂直表头

最新推荐文章于 2024-03-21 14:32:54 发布

不完美女孩-

最新推荐文章于 2024-03-21 14:32:54 发布

阅读量265

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ljjoneseed/article/details/136671616

版权

这篇文章介绍了如何在Vue.js应用中使用ElementUI的el-table组件展示动态表头，并结合computed属性处理数据，生成具有名称、内容和单价的表格。

摘要由CSDN通过智能技术生成

<el-table
   border
      style="width: 100%"
      :data="getValues"
      :show-header="false">
    <el-table-column
        v-for="(item, index) in getHeaders"
        :key="index"
        :prop="item">
    </el-table-column>
  </el-table>




headers: [
 {prop: 'name',label: '名称'},
  {prop: 'content', label: '内容'},
  {prop: 'price',label: '单价'},
],
 tableData:[
   {"id": 1,"name": "名称1", "content": "内容1","price": 22},
   {"id": 2,"name": "名称2","content": "内容2","price": 11},
 ],




 computed:{
    getHeaders() {
      return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues() {
      return this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
      });
    },
  },