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

 更新时间:2018年11月30日 09:39:57   作者:River_mx  
这篇文章主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

先看看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的代码可以这样改:


请忽略上图代码中的其他参数,看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
 },
}

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

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

相关文章

  • 详解Vue3中ref和reactive函数的使用

    详解Vue3中ref和reactive函数的使用

    这篇文章主要为大家详细介绍了Vue3中ref和reactive函数的使用教程,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,需要的可以参考一下
    2022-07-07
  • 手把手教你Vue3 按需引入 Echarts的过程(收藏)

    手把手教你Vue3 按需引入 Echarts的过程(收藏)

    新项目采用 Vue3 作为前端项目框架,避免不了要使用 echarts,但是在使用的时候,出现了与 Vue2 使用不一样的地方,所以特别记下来,希望给到有需要的同学一些帮助
    2023-10-10
  • Vue 使用中的小技巧

    Vue 使用中的小技巧

    这篇文章主要介绍了Vue 使用中的小技巧,是小编日常开发的时候用到的小技巧,需要的朋友可以参考下
    2018-04-04
  • vue基础ESLint Prettier配置教程详解

    vue基础ESLint Prettier配置教程详解

    这篇文章主要介绍了vue基础ESLint Prettier配置教程详解,本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue
    2022-07-07
  • 使用Vue组件实现一个简单弹窗效果

    使用Vue组件实现一个简单弹窗效果

    这篇文章主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现, slot 插槽的使用方式,props 、 $emit 传参,具体组件代码也传上去了。需要的朋友可以参考下
    2018-04-04
  • 解决Element组件的坑:抽屉drawer和弹窗dialog

    解决Element组件的坑:抽屉drawer和弹窗dialog

    这篇文章主要介绍了解决Element组件的坑:抽屉drawer和弹窗dialog问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果的实例代码

    这篇文章主要介绍了Vue 使用计时器实现跑马灯效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-07-07
  • vue如何实现上传图片和显示图片

    vue如何实现上传图片和显示图片

    这篇文章主要介绍了vue如何实现上传图片和显示图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 基于脚手架创建Vue项目实现步骤详解

    基于脚手架创建Vue项目实现步骤详解

    这篇文章主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • ElementUI如何修改el-cascader的默认样式

    ElementUI如何修改el-cascader的默认样式

    ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下
    2023-12-12

最新评论