精华内容
下载资源
问答
  • vue表格渲染数据

    2019-08-15 14:47:31
    vue渲染表格数据 表格中的状态用el-tag标签做的,下面为了省事,把标签删了,有需要的小伙伴可以去https://element.eleme.cn/2.0/#/zh-CN/component/installation上自己看看 <template> <el-table :...

    vue中渲染表格数据

    在这里插入图片描述

    表格中的状态用el-tag标签做的,下面为了省事,把标签删了,有需要的小伙伴可以去https://element.eleme.cn/2.0/#/zh-CN/component/installation上自己看看

    <template>
        <el-table
          :data="list"
          border
          fit
          highlight-current-row
          :style="{height:height + &quot;px&quot;}"
          :max-height="height-205"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            prop="id"
            align="center"
            width="50"
          >
            <template slot-scope="scope">
              {{ scope.$index + (listQuery._page)*listQuery._page_size }}
            </template>
          </el-table-column>
          <el-table-column
            v-for="item in tableHeader"
            :key="item.key"
            :label="item.label"
            :width="item.width"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
    </template>
    
    <script>
    // 调用接口  a:接口名称   b:接口路径
    import { a } from 'b'
    
    export default {
    	data(){
    		return {
    			list:null,
    			// listQuery:分页信息  当前页数,每页显示数据条数
    			listQuery: {
    				_page: 1,
    				_page_size: 15
    			},
    			// tableHeader存放的是表头的内容  
    			// label:表头单元格内容  key:表头对应的字段名
    			tableHeader: [
    		        { label: '编号', key: 'sn' },
    		        { label: '型号', key: 'model' },
    		        { label: '名称', key: 'name' },
    		        { label: '部门', key: 'fullname' },
    		        { label: '类型', key: 'kind' },
    		        { label: '状态', key: 'online', width: '150px' }
    			]
    		}
    	},
    	created(){
    		this.getList()
    	},
    	methods(){
    		//	往表格填充数据
    		getList(){
    			a(this.listQuery).then(res => {
    				// res只是一个参数,存放取过来的所有数据
    				this.list = res
    			})
    		}
    	}
    }
    </script>
    
    
    展开全文
  • vue表格渲染

    2020-03-03 16:48:39
    ​ 前段时间在工作过程中遇到了vue表格渲染的问题,具体的需求就是在一个页面中动态渲染出多个不定长表头和内容的表格,由于自己刚接触vue不久,所以在这个把自己的解决记录下来,方便自己和有需要的人做一下参考...

    ​ 前段时间在工作过程中遇到了vue多表格渲染的问题,具体的需求就是在一个页面中动态渲染出多个不定长表头和内容的表格,由于自己刚接触vue不久,所以在这个把自己的解决记录下来,方便自己和有需要的人做一下参考。(注:这里我使用的是elementui的表格组件。)


    ​ 在文章我将从最终实现效果后台数据准备实现思路以及代码片段等四个方面介绍:

    1. 最终效果图
      在这里插入图片描述

    2. 实现思路

      • 后台返回一个集合,集合中包含多个表格,每个表格包含两部分,动态表头数组以及动态对象表格数组;
      • 渲染时,表格中动态表头信息和表格的内容分开渲染;
      • 动态表头使用一个循环渲染出来即可,通过它的数量控制表格列数;而动态表格长度主要用来控制表格的行数;
      • 表格中内容的获取是利用表格内容数据位置和表格头位置来定位的,即data[index][key],其中index为遍历表格内容数据是的当前行所在的索引,而key为表格头当前的内容。(这里只是为了方便测试,head直接用的中文,你也可以使用对象数组存储表头信息,key-value形式
    3. 后台数据准备

      [
      	{
      	"columnHead":["考核内容-1","栏目-2"],
      	"columnTitle":"子实验名-1",
      	"operateScore":15.0,
      	"timeUsed":"23"
      	"columnInfo":[
      		"是否选择正确的取样工具进行取样","9",
      		"是否选择正确的取样工具进行取样","9",
      		"取样工具的使用方式是否正确","1",
      		"观察时是否选择正确的旋钮将样品调整到合适的光线强度","1",
      		"观察时是否选择正确的旋钮将样品调整到合适的对比度",
      		"9","观察时是否选择正确的旋钮将样品调整到合适的清晰度","1",
      		"观察时是否选择正确的旋钮将样品调整到合适的位置","8",
      		"观察时是否选择正确的旋钮,调整样品的倍数","1",
      		"操作总得分","87","实验操作步骤得分总计","89"
      		]},
      	{
      	"columnHead":["实验内容-2","栏目-3","栏目-4","栏目-5"],
      	"columnTitle":"子实验名-2",
      	"operateScore":15.0,
      	"timeUsed":"23"
      	"columnInfo":[
      		"是否选择正确的取样工具进行取样","9",	"是否选择正确的取样工具进行取样","9",
      		"取样工具的使用方式是否正确","1",
      		"观察时是否选择正确的旋钮将样品调整到合适的光线强度","1",
      		"观察时是否选择正确的旋钮将样品调整到合适的对比度","9",
      		"观察时是否选择正确的旋钮将样品调整到合适的清晰度","1",
      		"观察时是否选择正确的旋钮将样品调整到合适的位置","8",
      		"观察时是否选择正确的旋钮,调整样品的倍数","1",
      		"操作总得分","87",
      		"实验操作步骤得分总计","79"]
      	}
      ]
      
    4. 代码片段

      <el-table class="h5-table" :data="value.transformInfo">
           <el-table-column label="序号" type="index" width="180">
           </el-table-column>
           <el-table-column v-for="(key, list) in value.headers"
            :key="list" :label="key">
             <template slot-scope="scope">
      		<span>
          	{{ value.transformInfo[scope.$index][key] }}
           	</span>
             </template>
           </el-table-column>
           </el-table>
             </template>
           </el-table-column>
      </el-table>
      
    展开全文
  • vue动态渲染表格

    2021-03-25 19:50:48
    所以需要动态渲染表格的列,如下图中2人团价格以及3人团价格表头 需求描述: 当后台管理员选择开团的类型后,所关联的参团商品设置sku时,会动态渲染参团类型所对应的价格。 如下图sku设置。 ![]...

    项目场景:

    拼团的后台项目,项目中需要设置参团的sku,也就是所开的这个团是几人的团,开团的人数不同,价格也就不同。所以需要动态渲染个表格的列,如下图中2人团价格以及3人团价格表头

    需求描述:

    当后台管理员选择开团的类型后,所关联的参团商品设置sku时,会动态渲染参团类型所对应的价格。 如下图sku设置。


    代码:

    <el-table
            ref="multipleTable"
            :data="skuTableData"
            tooltip-effect="dark"
            style="width: 100%"
            border
          >
            <el-table-column prop="id" label="SKU编号" width="120" align="center">
            </el-table-column>
            <el-table-column
              prop="sku_attr_text"
              label="规格"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="address" label="价格" align="center">
            </el-table-column>
            <el-table-column prop="stock" label="库存" align="center">
            </el-table-column>
    
    		//动态渲染的表格列
            <el-table-column
              :label="item.val"
              v-for="(item, index) in tableHead"
              :key="index"
            >
              <template scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row[item.item]"
                  placeholder="0"
                  type="number"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
    
    
    
    
    tableHead:[
    	{ val: "2人团价格", item: "target1" },
    	{ val: "3人团价格", item: "target2" },
    ]  是个数组
    
    
    skuTableData:[
    	{target1:1},
    	{target2:2}
    ]
    这个是表格的行数据 主要就是数据对应上
    

    展开全文
  • Vue - Table表格渲染上千数据优化此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当中不会出现UI...

    Vue - Table表格渲染上千数据优化

    此次项目经验会谈谈常常在项目中,针对成千上万数据渲染优化的不断探索来谈谈本身的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操做过程当中不会出现UI卡顿或者最糟糕的状况,直接浏览器奔溃。css

    其优化目录以下,因为内容不少,会分两篇文章进行研究,前端

    本文章主要会围绕如何设计一个虚拟滚动来渲染成千上万的数据。vue

    1.表格布局(To be continue)react

    2.Reflow & Repaint渲染方式(TBC)git

    3.浏览器API:window.requestAnimationFrame 渲染优化(TBC)程序员

    4.虚拟滚动:Virtual scrollinggithub

    GITHUB-Vue Table表格渲染上千数据 : 后续会加入Filter功能,针对Reflow和RequestAnimationFrame的渲染效果会更加明显web

    虚拟滚动(Virtual scrolling)篇

    关键字:虚拟行渲染,transform数据移动,列表节点渲染优化编程

    NK0 - Background数组

    本文的前提条件是前端已经缓存了上万条数据,当渲染数据到UI上时,如何让用户在使用过程当中不会遭到卡顿,用起来不流畅?

    以前不少项目因为数据大致围绕在上千左右,当结果集结合其它功能,例如Filter数据过滤功能一块儿使用的话,会采用如下几种方式去优化列表渲染,

    (1)Version1: 采用display:none(对应Vue的指令是v-show),再结合v-for中的Key来复用DOM元素和隐藏元素 =》该方式会致使UI Reflow即回流,因此UI会常常出现短暂的卡顿,用户体验不是很好

    (2)Version2: 采用window对象的内置API,即window.requestAnimation(),来渲染成千上万条数据,即模拟动画效果让用户操做起来特别的顺畅。

    以上两种方式都有个特色:DOM中会插入数据量大小的元素,尽管有些数据被隐藏起来,但都会致使HTML文件size会很是大,低端设备的速度会明显变慢。

    因此基于以上两种方式,还不可以知足去渲染上万条数据!

    也所以trigger出本文的主题 - 基于VUE列表的虚拟滚动

    本文的虚拟滚动方式主要围绕着

    (1)虚拟行渲染:缓存数据和筛选数据,除了要保留用户的可视区域的数据,还考虑到了若是用户的滚动范围不是很大的话,就不须要去刷新页面,因此DOM中的元素除了可视区域的数据,会多保留视图的上下留闲数据。

    (2)布局:主要是为了伪装全部数据元素都有在占用空间,浏览过React virtualized库,发现它在复用已有DOM元素的基础上,经过css的绝对定位position:absolute + top:偏移量,来移动数据,可是这样滚动元素的时候会引发浏览器回流,会增长更多的渲染开销,因此我这边会采用另外一种方式,即transform:translateY(偏移量)来优化数据移动,由于该CSS3元素不会引发Reflow和Repaint。

    (3)DOM复用:使DOM节点的数量保持在较低的水平,由于DOM节点若是太大而没法管理,低端设备的速度会明显变慢,因此咱们能作的是复用已有的DOM节点和减小每一个节点的布局、样式和绘制方面的开销成本。而VUE提供了数组全新赋值和变异方法来复用DOM和减小DOM操做,可是数组全新赋值的开销成本比数组变异开销更大,因此针对用户的滚动速度来优化列表渲染。

    NK1 - 虚拟滚动(Virtual Scrolling)

    下面是当咱们用虚拟滚动方式来处理上万条数据在UI的呈现效果,

    从上面的结果发现,当用鼠标滚动的时候,

    (1)尽管数据量是上万条,可是HTML标签元素永远就那么几个

    (2)有些HTML元素会被更新,而有些HTML元素不会变化

    虚拟滚动可以很好优化上万条数据的呈现跟的上用户滚动操做的速度,犹如动画般的交互顺滑。

    接下来会分享下虚拟滚动的设计实现,

    NK2 Virtual scrolling - Props Design(属性设计)

    (1)viewport:这里当作是Table数据的可视区域,须要提供可视区域的高度,用于计算实际渲染在DOM中Item的数量。

    (2)size:每条数据在DOM中占用的高度,用于统计虚拟列表的高度,默认每行的高度为40px。

    (3)Render Items:真正曾如今用户视觉上的items。

    (4)Remain Items:(向上/向下)但是区域以外的留闲数据高度,不显示在viewport中,可是存在DOM中,其用于当用户滚动的距离不是很大的时候,UI不须要从新去渲染,为滚动作了一层留长优化。

    接下来说一下虚拟滚动特征,

    NK3 Virtual scrolling - Virtual Row Render(虚拟行渲染)

    Virtual Row Render - 在已知viewport有高度状况下,咱们能够先把每条数据看做是每个独立的行数据,用索引来标记每条数据,用Map对象封装这些块数据,存在浏览器的内存中,当滚动事件被触发的时候,咱们只须要渲染可以映射在viewport中对应的块数据,而不是遍历渲染全部块,能有效的减小HTML file size。

    key = index,咱们用数据索引和每条数据的高度来做为虚拟块Map的Key,结合滚动的距离和viewport的高度,来标记实际要渲染在DOM中的items,即

    另外每一个Item会根据Key值来定义其显示范围,如item1的key为0,则它的显示范围应该是[0~40)这个区间,而item2区间为[40,80),以此类推……其目的是用于计算item的显示区间是否在滚动的范围内。

    NK4 Virtual scrolling - 数据移动设计

    场景:当咱们的列表有上万条数据,咱们给定

    每条数据的高度为40px,即itemHeight = 40px,

    留闲高度为80,即remainHeight = 80px,

    而表格的可视区域高度为80px,即viewportHeight = 80px,

    由此咱们能够设计存在DOM中的items最多能够渲染6条。

    因此当咱们在滚动的时候,当滚动的距离到item12的高度的时候,此时咱们但愿可视区域的数据会被刷新,而且DOM元素会被跟新以下,

    可是,当用户滚动的距离不是很大的话,例如它从item1滚动到item4的时候,咱们但愿DOM不须要被跟新,即

    接着咱们来细节化模拟数据滚动,以下图

    实线,例如item1 ~ item6,表明已经在DOM中存在的数据

    黑色实体,例如item1~item2,显示在可视区域的数据,

    反之灰色实体item3~item6的被隐藏了起来

    而虚拟列表的数据Size决定了可视区域滚动条的大小

    滚动公式设计,主要是如何肯定Dom items的高度范围,即

    向下滚动场景模拟: 当咱们滚动的距离 小于 向上的remainHeight(80px)的时候,

    其minDomItemHeight = 0,

    maxDomItemHeight = viewportHeight + 2 * remainHeight(向上/向下留闲) = 240px;

    但DOM中的Items为 [item1,item2,item3,item4,item5,item6] -> 没有变化

    当咱们向下滚动到100px的时候,

    DOM中的Items为 [item1,item2,item3,item4,item5,item6,item7] -> 新增了一个item7

    当咱们滚动到120px的时候,

    DOM中的Items为 [item2,item3,item4,item5,item6,item7] -> item1DOM元素被移除了。

    ……

    因此按照用户滚动的趋势,咱们统计了滚动距离时,咱们的数据渲染状况以下

    即滚动公式

    向下取整 minItemHeight = scrollTop > remainHeight ? Math.floor((scrollTop - remainHeight)/ itemHeight) * itemHeight : 0;

    向上取整maxItemHeight = scrollTop > remainHeight ? (Math.ceil((scrollTop + viewPortHeight + remainHeight) / itemHeight) )* itemHeight : defaultRenderItemsHeight;

    而defaultRenderItemsHeight须要跟viewport的高度和留长高度,来决定渲染在DOM中item的数量.

    const renderItems = Math.ceil(viewPortHeight / itemHeight) + 2 * remainItems;

    const renderItemsHeight = renderItems * itemHeight;

    NK5 Virtual scrolling - CSS3 transform优化数据移动

    当数据往上/下滚动的时候,咱们须要复用和移动DOM中的元素,使其能根据咱们算出的高度显示在viewport中,通常状况会使用position:relative + top来进行元素垂直方向的偏移,可是咱们知道当采用top属性,它会使UI Reflow,性能不是很好,因此咱们采用CSS3中的transform变形属性来移动,其优势是不会是UI从新的Reflow和Repaint.

    transform - translateY的特色以下,

    (1)范围:适用全部的HTML标签元素

    (2)它是指Y轴(垂直轴)方向的移动,单位能够是px,em或百分比等

    (3)当y为正时,表示元素在垂直方向向下移动;

    当y为负时,表示元素在垂直方向向上移动,跟咱们的数学坐标系不一样

    (4)性能优化:元素移动,不会引发Reflow和Repaint

    因此咱们在初始化/跟新要渲染数据的时候,能够为其绑定translateY的值

    (translateY=itemIndex * itemHeight),如,

    NK6 Virtual scrolling - 列表渲染优化

    咱们来比较下数组跟新的两种方式:变异方法和替换数组以下

    即变异方式和替换数组方式中的索引值替换,会复用须要更改的DOM元素,

    而数组全新赋值方式则会复用渲染整个列表(DOM元素移位),

    当滚动元素的时候,数组全新赋值节点渲染状况以下,

    而局部跟新节点的渲染取下,

    因此当咱们用translateY属性来进行元素位置移动的时候,

    即便元素插入DOM的位置不是按顺序排列的,可是translateY能确保其元素它在垂直方向的距离以下图,

    红色区域表明当鼠标往下滚动的时候,须要跟新的DOM元素

    黄色区域则表明不须要从新渲染

    因此针对列表的优化渲染,建议不要对数组全新赋值,能够考虑用数组替换 + 数组变异的方式来复用已有的节点。若是先后数组变化彻底不相等的话,能够直接使用数组全新赋值方式。

    彩蛋: 使用AVA成为该项目的测试驱动框架,整个过程采用的是TDD(测试驱动开发)来实践数据移动的功能模块,例如,

    当要计算一个minDomItemHeight的时候,其测试用例以下,

    而功能实现块:

    当要计算一个maxDomItemHeight的时候,其测试用例以下,

    当要计算一个minDomItemHeight和maxDomItemHeight的时候,其测试用例只须要一个来验证就行,其结果以下,

    而功能实现

    小编是一个有着5年工做经验的前端开发工程师,关于前端编程,本身有作材料的整合,一个完整的前端编程学习路线,学习材料和工具,+个人威信收取,免费送给tanzhou-10838你们,但愿你也能凭着本身的努力,成为下一个优秀的程序员。

    展开全文
  • 前言vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法点我在线体验Demo(请用电脑查看)亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到...
  • 今天小编就为大家分享一篇对Vue.js实现表格渲染的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用vue渲染表格隔行变色

    千次阅读 2020-02-23 20:25:37
    使用vue框架,渲染一个表格。 要求: 1.表格隔行变色。 2 并能够通过下拉菜单选择颜色
  • 今天给大家分享一款优秀的Vue流畅渲染大数据表格组件库UmyUI。umy-ui 基于 vue2.x 构建的高性能组件库。完美解决表格十万级大数据卡顿、编辑表格卡顿等问题。特色文档:涵盖umy-ui各个方面,给开发者方向指导和设计...
  • vue 巧妙渲染动态表格

    千次阅读 2019-07-15 10:41:26
    渲染核心组件,代码如下 <template> <div> <table border="0" cellpadding="0" cellspacing="0" class="itemList"> <template v-for="(itemCol, indexCol) in colList"> <tr ...
  • Vue - Table表格渲染上千数据优化

    万次阅读 2019-05-29 18:12:45
    Vue - Table表格渲染上千数据优化 这次项目经验会谈谈经常在项目中,针对成千上万数据渲染优化的不断探索来谈谈自己的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户操作过程中不会出现UI...
  • vue项目动态表格渲染,表格编辑,上传文件,多个table表格展示等(具体见代码)分享给有需要的家人们 页面代码 template <template> <div> <el-header style="height:50px"> <el-row :...
  • 表格渲染性能

    2021-03-11 16:35:37
    vue 表格渲染性能问题 https://www.jb51.net/article/158157.htm
  • Vue.js实现表格渲染

    万次阅读 2016-09-19 21:21:11
    我们大多时候渲染表格都是key值在页面上写死的情况下,一个个value渲染,那我们遇到数据是键值对的时候该如何渲染呢? 我们查看vue的官方文档,如下: 值域 v-for v-for 也可以接收一个整数,此时它将...
  • vue动态渲染表格,显示上万条数据

    千次阅读 2019-04-07 16:02:25
    <template> <!-- 表格 --> <div class="table-box"> <div class="tabletbody"> <div id="divScroll" style="float:right;"></div> <div cla...
  • 李志刚:近几个月在开发一个基于Vue的数据可视化分析辅助应用———DMap(谛听),一套为数据分析师和数据科学家提供的基于位置大数据分析的工具,旨在提高数据分析效率,降低获取多数据并行分析成本,简化大屏和数据...
  • 修改currentpage没有效果,要在分页el-pagination中添加这一句 :current-page.sync="currentPage" 相当于把currentPage变量和分页的当前页绑定
  • 好几次因为选项卡切换导致表格渲染出错,最后了解到vue视图的渲染机制意识到问题根源所在。解决办法案例: 1.父组件中使用选项卡,以及表格组件: 2.在子组件中接收并使用这两个不同值的属性作为key值 本来只...
  • ant design vue渲染表格显示no data

    千次阅读 2019-12-10 16:19:31
    按照ant design vue给出例子写表格组件,有表格数据,却渲染不出来,在分析这一问题,发现几个需要注意的点,做一记录 一般开发环境,当出现问题时,都会给出警告信息,所以留意控制台的输出 开发环境script...
  • Vue中强制表格数据重新渲染:data="tableData.slice((this.pagenum-1)*this.pagesize,this.pagenum*this.pagesize)"style="width: 100%"border:key="keyvalue">@size-change="handleSizeChange"@current-change=...
  • {{tableDatahe[index]}} el-button> template> el-table-column> el-table> 表格1el-button> 表格2el-button> div> template> <script> export default { data(){ return { tableData: [{ date: '2016-05-02', name:...
  • 转自 nickkcik 大神这次项目经验会谈谈经常在项目中,针对成千上万数据渲染优化的不断探索来谈谈自己的体会,其目的就是保证用户浏览上万条数据的时候,UI要很流畅,确保用户...1.表格布局(To be continue)2.Refl...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 821
精华内容 328
关键字:

vue表格渲染

vue 订阅