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 相关文章推荐
JS:window.onload的使用介绍
Nov 13 Javascript
JS的get和set使用示例
Feb 20 Javascript
javascript实现切换td中的值
Dec 05 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
为什么要使用Vuex的介绍
Jan 19 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
快速开发一个PHP扩展图文教程
2008/12/12 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php的4种常见运行方式
2015/03/20 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
微信小程序之MaterialDesign--input组件详解
2017/02/15 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
js仿京东放大镜效果
2020/08/09 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
在校大学生的职业生涯规划书
2014/03/14 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
如何在Python项目中引入日志
2021/05/31 Python