精华内容
下载资源
问答
  • vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿...
  • vue vxe-table 一个 PC 端表格解决方案,大数据表格

    万次阅读 热门讨论 2019-05-19 20:07:23
    vxe-table vue table 一个非常强大表格组件 一个功能更加强大的 Vue 表格组件 查看 vxe-table 功能点 基础 尺寸 斑马线条纹 带边框 单元格样式 ...滚动渲染 展开行 树形表格 可编辑表...

    查看 gitee
    查看 github

    虽然不知道有什么用,但还是非常感谢码云的认可

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    功能点

    • 基础表格
    • 高级表格
    • 斑马线条纹
    • 多种边框
    • 单元格样式
    • 列宽拖动
    • 最大高度
    • 自适应宽高
    • 固定列
    • 多级表头
    • 表尾数据
    • 高亮行、列
    • 序号
    • 单选框
    • 复选框
    • 下拉选项
    • 开关
    • 排序
    • 筛选
    • 合并行或列
    • 导入
    • 导出
    • 打印
    • 显示/隐藏列
    • 加载中
    • 格式化内容
    • 自定义插槽/模板
    • 快捷菜单
    • 展开行
    • 分页
    • 表单
    • 工具栏
    • 虚拟列表
    • 增删改查
    • 树表格
    • 数据校验
    • 数据代理
    • 键盘导航
    • 模态窗口
    • 渲染器
    • 虚拟滚动

    例子

    可以使用 <vxe-column …> 或者 <vxe-table-column …> 定义列信息,两种方式都能使用

    <template>
      <div>
        <vxe-table :data="tableData">
          <vxe-column type="index" width="60"></vxe-column>
          <vxe-column field="name" title="Name"></vxe-column>
          <vxe-column field="date" title="Date"></vxe-column>
          <vxe-column field="address" title="Address"></vxe-column>
        </vxe-table>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          tableData: [
            {
              id: 10001,
              name: 'test1',
              sex: 'Man',
              date: '2019-05-01',
              address: 'address abc123'
            }
          ]
        }
      }
    }
    </script>
    
    展开全文
  • 底部表格:接收后端返回JSON数据,对表格渲染显示 2、前端传参 前端采用Layui框架渲染,对页码和条数传参给后台做条件查询; 得到后端返回数据,对前端表格进行重载刷新 顶部搜索栏HTML <div class="layui-col-...

    1、显示效果

    界面主要由两部分完成
    顶部搜索栏:按条件传参给后端请求,控制表格数据重载刷新
    底部表格:接收后端返回JSON数据,对表格渲染显示
    在这里插入图片描述

    2、前端传参

    前端采用Layui框架渲染,对页码和条数传参给后台做条件查询;
    得到后端返回数据,对前端表格进行重载刷新

    顶部搜索栏HTML

    <div class="layui-col-md12 x-so">
        <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
        <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
        <input type="text" name="keyword" id="keyword" placeholder="搜索关键字" autocomplete="off" class="layui-input">
        <button class="layui-btn" id="serach" data-type="reload"><i class="layui-icon">&#xe615;</i></button>
    </div>
    

    表格渲染

    var table = layui.table;
    table.render({
        elem: '#allData'
        , id: 'allDataTable'
        , height: 400   //容器高度
        , url: '/query' //数据接口
        , method: 'post'
        , where: {
            name: 'test',
            startDate:'',
            endDate: '',
            keyword: ''} // 默认传参 limit,page
        , page: true    //开启分页
        , limits: [10, 50, 100, 500, 1000]  // 显示页数
        , cols: [[      //表头
            {field: 'host', title: 'Host', width: 130, sort: true, fixed: 'left'}
            , {field: 'address', title: '地址', width: 150, sort: true}
            , {field: 'user', title: '用户名', width: 85, sort: true}
            , {field: 'pw', title: '密码', width: 100, sort: true}
            , {field: 'new_user', title: '新增用户', width: 95, sort: true}
            , {field: 'new_pw', title: '新增密码', width: 95, sort: true}
            , {field: 'systemt', title: '系统配置', width: 95, sort: true}
            , {field: 'UpdateTime', title: '更新时间', width: 145, sort: true}
            , {field: 'mark', title: '备注', width: 70, sort: true}
            , {field: 'target', title: '来源', width: 80}
        ]]
    });
    

    表格重载

    var active = {
        reload: function () {
            var _startDate = $('#start').val();
            var _endDate = $('#end').val();
            var _keyword = $('#keyword').val();
    
            var index = layer.msg('查询中,请稍等...', {icon: 16, time: false, shade: 0});
            setTimeout(function () {
                table.reload('allDataTable', { // 重载表格
                    page: {curr: 1}, // 重新从第一页开始
                    where: {
                        startDate: _startDate,
                        endDate: _endDate,
                        keyword: _keyword
                    }
                });
                layer.close(index);
            }, 800);
        }
    };
    $('#serach').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    

    3、后端接收请求

    设定POST请求方式,通过 request.form 接收前端参数
    路由共实现两个数据查询的功能(Filter)

    1、查询总数
    query(db.func.count(table.c.host)).scalar()
    2、查询条目明细
    dquery(table).filter(rule).limit(limit).offset((int(page) - 1))

    根据 Layui 官方默认的JSON数据样式,最终返回格式如下:
    { "code": 0,"msg": "","count": 1000,"data": [{}, {}]}

    完整代码:

    @app.route('/query', methods=['POST'])
    def query():
        form_dict = request.form
        name = form_dict['name']
        limit = form_dict['limit']
        page = form_dict['page']
        startDate = form_dict['startDate']
        endDate = form_dict['endDate']
        keyword = form_dict['keyword']
    
        data = {"code": 0, "msg": "Successful", }
        try:
            table = all_table[name]
            _count = db.session.query(db.func.count(table.c.host)).scalar()
            # result = db.session.query(table).all()
            # result = db.session.query(table).filter(table.c.address.like('%上海%')).limit(limit).offset((int(page) - 1))
    
            if keyword == '':
                if startDate == '' or endDate == '':
                    rule = table.c.host.like('%.%')
                    _count = db.session.query(db.func.count(table.c.host)).scalar()
                else:
                    rule = table.c.UpdateTime.between(startDate, endDate)
                    _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
            else:
                if startDate == '' or endDate == '':
                    rule = or_(table.c.host.like('%' + str(keyword) + '%'),
                               table.c.address.like('%' + str(keyword) + '%'),
                               table.c.user.like('%' + str(keyword) + '%'),
                               table.c.pw.like('%' + str(keyword) + '%'),
                               table.c.new_user.like('%' + str(keyword) + '%'),
                               table.c.new_pw.like('%' + str(keyword) + '%'),
                               table.c.target.like('%' + str(keyword) + '%'),
                               table.c.systemt.like('%' + str(keyword) + '%'),
                               table.c.mark.like('%' + str(keyword) + '%')
                               )
                    _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
                else:
                    rule = and_(
                        table.c.UpdateTime.between(startDate, endDate),
                        or_(table.c.host.like('%' + str(keyword) + '%'),
                            table.c.address.like('%' + str(keyword) + '%'),
                            table.c.user.like('%' + str(keyword) + '%'),
                            table.c.pw.like('%' + str(keyword) + '%'),
                            table.c.new_user.like('%' + str(keyword) + '%'),
                            table.c.new_pw.like('%' + str(keyword) + '%'),
                            table.c.target.like('%' + str(keyword) + '%'),
                            table.c.systemt.like('%' + str(keyword) + '%'),
                            table.c.mark.like('%' + str(keyword) + '%')
                            )
                    )
                    _count = db.session.query(db.func.count(table.c.host)).filter(rule).scalar()
    
            result = db.session.query(table).filter(rule).limit(limit).offset(int(page) - 1))
            data['count'] = _count
            data['data'] = [x._asdict() for x in result]
            # UpdateTime日期格式化输出
            for i in range(len(data['data'])):
                if data['data'][i]['UpdateTime']:
                    data['data'][i]['UpdateTime'] = data['data'][i]['UpdateTime'].strftime("%Y-%m-%d %H:%M:%S")
        except Exception as err:
            data['code'] = 1
            data['msg'] = 'Failed! {}'.format(err)
            
        return jsonify(data)
    

    Tip:
    Flask sqlalchemy 映射关联已存在表的两种方法
    Table 数据表格官方文档 - layui.table

    关于博主

    喜欢就点赞 or 赞赏。
    3.65元,一年365天继续分享创作!
    在这里插入图片描述

    展开全文
  • vxe-table插件手册:... 模板: <vxe-grid resizable ref="tableVxe" border ... highlight-hover-row :tooltip-config="{theme: 'light'}" ... class="vxe-table-i

    vxe-table插件手册:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic

    模板:

    <vxe-grid
        resizable
        ref="tableVxe"
        border
        stripe
        highlight-hover-row
        :tooltip-config="{theme: 'light'}"
        show-overflow
        class="vxe-table-iview"
        height="414"
        size="mini"
        empty="暂无数据"
        @select-change="selectChangeVxe"
        @select-all="selectChangeVxe"
        @sort-change="sortDataVxe"
        :remote-sort="true"
        :data="ordDataNow"
        :columns="orderColumns"></vxe-grid>

    配置: 

    orderColumns: [
        {
            title: '收货人电话',
            key: 'receiverPhone',
            field: 'receiverPhone',
            align: 'center',
            width: 100,
            funcName: 'receiverPhone',
            render: orderColumnsFunc.receiverPhone, // 引入【外部方法】更整洁和灵活
            slots: orderColumnsFunc.slots
            // formatter: (params) => { // 此处开始引入【外部方法】
            //   let text = params.row.receiver.phone
            //   return text
            // }
            // slots: {
            //   default: (params, h) => {
            //     let text = params.row.receiver.phone
            //     return [h('span', {
            //       attrs: {
            //         title: text
            //       }
            //     }, text)]
            //   }
            // }
        }
    ]

    外部方法: 

    let orderColumnsFunc = {
        receiverPhone: (h, params) => {
            let text = params.row.receiver.phone
            return h('span', {
                attrs: {
                title: text
                }
            }, text)
        },
        slots: {
            default: (params, h) => {
                let _func = orderColumnsFunc[params.column.own.key](h, params)
                return _func instanceof Array === false ? [_func] : _func // 处理iview返回已经是数组格式的情况
            }
        }
    }

     

    展开全文
  • 问题背景: ...技术专栏 | DMap——实战Vue百万条数据渲染表格组件开发 该组件采用了实时计算、虚拟渲染的方式,很好的优化了前端table在大量数据面前的孱弱表现。具体算法原理可参看上面的技...

    问题背景:

    前段时间,项目中的一些功能需要查看大量的业务数据且不分页造成页面table在数据量千条级别时页面就已经快卡死了。时不时的就会内存溢出了。于是就要优化。

    在看解决方案的时候,DMap的解决方案映入了眼帘。技术专栏 | DMap——实战Vue百万条数据渲染表格组件开发

    该组件采用了实时计算、虚拟渲染的方式,很好的优化了前端table在大量数据面前的孱弱表现。具体算法原理可参看上面的技术文章。但遗憾的是,该组件是用npm搭的前端web应用,没法直接用。

    因为公司项目的前端采用的是vue.js+element-ui的架构,但,是传统的那种组织形式没有进行前后分离,意味着不能使用npm、ES6等。所以就必须使用webpack把该组件压成一个js文件,以<script>标签形式引入项目。正好github上有一个对vue-bigdata-table进行二次封装的组件,于是就打包拿来用了

    但是,博客和github上的具体使用描述比较模糊,故自己记录一下使用过程及遇到的一些坑

    预设环境:node.js -v10.13.0   npm -v6.4.1

    第一步:首先,获取到项目实例--vue-element-bigdata-table github获取地址:vue-element-bigdata-table

    第二步:按照README.md文件中的构建方式,npm install按照项目依赖后,使用npm脚本(封在了项目的package.json文件中,打开可以看到其实执行的是

    cross-env NODE_ENV=production webpack --progress --hide-modules

    )npm run dist进行生产打包。

    报错:

    ERROR in vue-element-bigdata-table.min.js from UglifyJs
    Unexpected token: operator (>) [./node_modules/element-ui/src/mixins/emitter.js:2,0][vue-element-bigdata-table.min.js:13115,32]
    npm ERR! code ELIFECYCLE
    npm ERR! errno 2
    npm ERR! vue-element-bigdata-table@1.3.1 dist: `cross-env NODE_ENV=production webpack --progress --hide-modules`
    npm ERR! Exit status 2
    npm ERR!
    npm ERR! Failed at the vue-element-bigdata-table@1.3.1 dist script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\CPIC\AppData\Roaming\npm-cache\_logs\2018-11-24T04_31_09_618Z-debug.log

    其实这个报错是指:不能解析">"这个语法token,位置呢,就在原项目的 ./node_modules/element-ui/src/mixins/emitter.js这个文件的2,0位置,压缩文件的vue-element-bigdata-table.min.js的13115,32这个位置,如果你打开这两个位置,你会发现代码其实是一模一样的。意味着webpack的babel转换器没有将报错的源文件的ES6语法转为ES5语法,怪不到会报错。

    于是你需要在webpack.config.js文件的这个位置,将需要转换的js通过include也加进去,在此项目中就不要一个一个加了,看上面报错的文件是element-ui依赖的ES6语法原因,所以就整个都把element-ui文件下的所有文件都转了就ok了

    {
         test: /\.js$/,
         loader: 'babel-loader',
         exclude: /node_modules/,
         include: [
           resolve(__dirname, '../config'),//不加path可能会报resolve is not define
           path.resolve(__dirname, '报错的文件'),
         ]
    },

     

    resolve是node.js中Path对象的一个方法,一般调用的话不用加Path.的,类似于js中不用加window对象一样。但不知道为什么就是不行,不过加上Path就ok了

    第三步:将压缩成的vue-element-bigdata-table.min.js 引入项目使用即可。标签为<el-bigdata-table></el-bigdata-table>

    哎,前端这几年这是变化大啊,是一种全新的开发和组织形式了。有一种2.0革命的感觉。各种新规范、新框架、小工具层出不穷。有时候很多名词都没听过,所以在一面用的过程中,再一面去了解。最后发现其实蛮简单的一个东西,自己去看新名词背后所包含的定义费了蛮久时间。也是有点类似中年贫穷的那种辛酸feel的~  哈哈哈

    展开全文
  • 大数据知识分享之前端服务器渲染博客前言:服务器渲染1、什么是服务器渲染2、服务器渲染与客户端渲染优劣对比功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片...
  • 这是一个ant的虚拟表格,用于解决大数据渲染时页面卡顿的问题,本组件是对ant.desigin中Table组件进行一层封装,属性完全与原组件表保持一致的,可以让你实例中处理渲染1000万条数据,页面也非常流畅。 设计说明 ...
  • https://github.com/livelyPeng...一个表格组件(完美解决万级数据渲染卡顿问题),流畅渲染万级数据并不会影响到el-table的原有功能 分析:前端UI框架使用的是ElementUI,项目要求数据不分页一个表格至少要1000条...
  • echarts大数据页面

    2020-08-20 17:50:49
    3.在index.js中已经全部配置了ajax请求以及数据渲染方式,解开ajax后,配置请求路径,按照示例给的数据结构就可以完成页面渲染 4.页面表格数据用了隔行变色,返回数据根据时间进行了数组快排(倒序) 5.页面使用rem...
  • 因为数据量过多导致浏览器渲染过多的标签元素 导致DOM树占用内存较大 使得用户操作阻塞。 具体原理可参考别的大佬写的文章: DOM性能瓶颈与Javascript性能优化. 2、解决方法及原理 原理 解决思路可参考: 页面中长...
  • vue ag-grid-vue 渲染大数据表格 动态请求服务器数据设置子目录 目前只能是初始是一次性加载所有数据再分页渲染,还没有研究出滚动分页加载服务器。 这个方法是一次加载所有数据在前端再做的分页渲染。点击目录文件...
  • 实现表格分页

    2017-08-03 19:14:00
    由于工作需要,经常在开发中需要实现表格分页这种特效,目的的为提升用户体验,减少大数据渲染数量。 分页的分两种,一种是要和服务器交互,另一种是一次性拿到所有数据,在本地做分页处理。本次主要谈论第二种。 ...
  • 一款基于element-ui(2.9.1)扩展的支持树形表格的大数据表格组件 :calendar:说明 渲染树形数据时,必须要指定row-key和isTreeTable属性,row中包含子级。 表的惰性属性为true与加载函数load。通过指定行中的...
  • 有这样一个需求,一位 React Suite(以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染。 截止到目前(2019年1月18日)为止,开源 UI 库中没有找到...
  • element的table大量数据渲染卡顿解决

    千次阅读 2019-11-15 13:45:57
    B/S架构遇到很多的问题应该就是大数据渲染了(毕竟javascript单线程) 在使用table的时候,用户想操作大量表格数据(别跟客户说改需求了,不行的) 使用vxe-table就能解决我们的好多问题,不得不说,这是我遇到过...
  • el-table大数据量渲染卡顿的一种思路

    万次阅读 2020-01-15 12:55:55
    背景 现需要呈现一个表格,有近500行,30多列,使用vue+elementUI呈现。 这个数据量不算大,但可能列数比较多,渲染时速度很慢,滚动会有卡顿,...element-ui table 表格 大数据展示解决方案 支付万级数据展示 思...
  • Web Spider:浏览器渲染,Ajax,调度,页面评分,监视,分布式,高性能,按Solr / Elastic编制索引 BI集成:仅使用一个简单SQL即可将大型网站转换为表格和图表 大数据:大规模,各种存储:HBase / MongoDB 有关更...
  • 可视化使用直方图,密度图和3d体积渲染完成,从而允许交互式探索大数据。 Vaex使用内存映射,零内存复制策略和惰性计算来获得最佳性能(不浪费内存)。 正在安装 随着点: $ pip install vaex 或conda: $ conda ...
  • deferRender: true,// 当处理大数据时,延迟渲染数据,有效提高Datatables处理能力 bStateSave: true,//表格状态保持 searching: false,//搜索框 bPaginate: true, // 翻页功能 bLengthChange: true...
  • php导出csv报表

    2017-10-30 19:25:00
    最近系统有一个导出报表功能,之前是导出的.xsl报表,但是当导出数据达到十万条时,导出经常...这样就减少了文件大小,同时减少了渲染过程,可大幅提升性能,用于大数据导出,下面贴出相应代码 <?php $tab...
  • 最近一个偶然的机会,我发现了一个可以在短短几秒内处理几十亿数据的python工具包:Vaex, 处于好奇我研究了...可视化使用直方图,密度图和3d体积渲染完成,从而可以交互式探索大数据。Vaex使用内存映射,零内存复制策
  • 最近学习路径

    2021-04-25 20:28:23
    行业方向的话就是大数据前端,目前的核心发展包括 数据集、渲染引擎、数据模型、可视化 这四个模块,平时可以做的东西如 数据表格优化、Web Excel、SQL编辑器、智能可视化等。 现在在可视化方向做了一些事情,比如...
  • 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化页面编辑器 来制作页面:一般前端可视化编辑器只能...
  • 8. 面试题之从敲入 URL 到浏览器渲染完成 9. JS 是单线程,你了解其运行机制吗 ? 10. js 递归调用 11. WebKit 技术内幕之浏览器与 WebKit 内核 12. 前端工程化必备,语义化版本号扫盲,支持任意版本号位数的比较...

空空如也

空空如也

1 2
收藏数 31
精华内容 12
关键字:

大数据表格渲染