专栏首页python3ElementUI table表格列动态渲染

ElementUI table表格列动态渲染

一、概述

一般写table时,列都是固定。现有业务需求,列是不固定的。根据api返回的数据,进行动态渲染。

官方table示例,链接如下:

https://element.eleme.cn/#/zh-CN/component/table

二、实现

在此基础上,增加tableHeader 变量,用来动态渲染。

test.vue

<template>
  <div class="root">
    <el-table
      :data="tableData"
      style="width: 100%"
      :fit='true'
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column :prop="index" :label="item" sortable show-overflow-tooltip v-for="(item, index) in tableHeader"
                       :key="index">

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        tableHeader: {
          date: "日期",
          name: "姓名",
          address: "地址",
        },
        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 弄',
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }

  }
</script>

<style scoped>
  .root {
    margin: 20px 25px 0px 25px;
  }
</style>

效果如下:

说明:

修改tableHeader 和tableData,注意对应关系即可。

:fit='true'  宽度自适应

sortable 排序

show-overflow-tooltip 当内容过长被隐藏时显示

再增加2列,修改修改tableHeader 和tableData

<template>
  <div class="root">
    <el-table
      :data="tableData"
      style="width: 100%"
      :fit='true'
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column :prop="index" :label="item" sortable show-overflow-tooltip v-for="(item, index) in tableHeader"
                       :key="index">

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        tableHeader: {
          date: "日期",
          name: "姓名",
          address: "地址",
          age:"年龄",
          phone:"电话",
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          age:18,
          phone:"12345678910",
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          age:19,
          phone:"12345678911",
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          age:20,
          phone:"12345678912",
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          age:21,
          phone:"12345678913",
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }

  }
</script>

<style scoped>
  .root {
    margin: 20px 25px 0px 25px;
  }
</style>

效果如下:

本文参考链接:

https://www.jianshu.com/p/064a49f1752c

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue的表格动态渲染

    用户4344670
  • 面试官:SPA(单页应用)首屏加载速度慢怎么解决?

    首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要...

    @超人
  • 框架篇-Vue面试题5-怎么提高首屏渲染以及性能优化

    安装webpack-bundle-analyzer这个插件,然后使用npm run build --report输出项目打包情况,直观的比较哪个bundle文件...

    itclanCoder
  • ElementUI实现表格加载树形数据教程

    关键代码,在el-table添加属性,:tree-props="{children: 'children'}",注意row必须命名为children,官网也进行...

    SmileNicky
  • D2 Crud 简单易用的表格组件

    D2-Crud 是一套基于Vue.js 2.2.0+ 和 Element UI 2.0.0+ 的表格组件。 D2-Crud 将 Element 的功能进行了封装...

    FairyEver
  • ​Vue + SpringCloud前后端分离项目3个月项目实战经验分享(下)

    上篇文章总结了三个月的后端开发。本篇主要对3个个月前端开发做个总结。最开始我想着我主要负责好后端的开发。没后端接口开发完成与前台的同事调接口。由于前端严重缺人,...

    不安分的猿人
  • [javascript] vuejs媒资库项目展示

    媒资库负责帮海广监控特定媒体大号及指定关键词对应的实时博文,根据舆情关键字进行异常提醒,并支持快捷的一键发布至CMS系统,实现快捷的内容转载及新浪媒资内容的二次...

    陶士涵
  • 前端: 如何让你的Table组件无限可能

    一般我们渲染表格, 大多数是预先将表格结构写好, 比先定义好columns再向后端请求数据填充表格, 如下:

    徐小夕
  • vue入门笔记

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

    Noneplus

扫码关注云+社区

领取腾讯云代金券