VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解


Posted in Javascript onNovember 30, 2018

先看看ElementUI里关于el-table的template数据结构:

<template>
  <el-table
   :data="tableData"
   style="width: 100%">
   <el-table-column
    prop="date"
    label="日期"
    width="180">
   </el-table-column>
   <el-table-column
    prop="name"
    label="姓名"
    width="180">
   </el-table-column>
   <el-table-column
    prop="address"
    label="地址">
   </el-table-column>
  </el-table>
 </template>

再看看ElementUI里关于el-table的data数据结构:

<script>
  export default {
   data() {
    return {
     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 弄'
     }]
    }
   }
  }
</script>

那么问题来了,如果有很多prop怎么办?比如几百个?那就要用到循环结构了,获取到data数据之后,template的代码可以这样改:

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

请忽略上图代码中的其他参数,看v-for指令,里面的positionList对应的是el-table 里 :data="tableData",把它的任意数组里对象的key取出来就好了

细心的小伙伴已经发现了,我还用了动态的width,为了解决不同字数长度的表头折行显示的问题,这里的数据存在了positionKey的对象里,专门用来匹配到途中代码通过v-for循环对应的index(key)一致,从而获取到对应的width,为了方便使用,positionKey的数据结构是这样的:

export const positionKey= {
 key1: {
  title: '表头对应的文字1',
  width: 100
 },
 key2: {
  title: '表头对应的文字2',
  width: 120
 },
 key3: {
  title: '表头对应的文字3',
  width: 110
 },
}

这种数据结构也为后期的自定义拖拽配置动态列做了预备~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
很好用的js日历算法详细代码
Mar 07 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
原生js拖拽功能制作滑动条实例代码
Feb 05 Javascript
js字符串倒序的实例代码
Nov 30 #Javascript
实例讲解JavaScript截取字符串
Nov 30 #Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 #Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 #Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 #Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 #Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 #Javascript
You might like
ThinkPHP之N方法实例详解
2014/06/20 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP加密解密函数详解
2015/10/28 PHP
PDO::errorCode讲解
2019/01/28 PHP
js 金额文本框实现代码
2012/02/14 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
jquery插件EasyUI中form表单提交实例分享
2016/01/11 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
企业统计员岗位职责
2013/12/13 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
2014超市双十一活动策划方案
2014/09/29 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技