动态表格优化、vue 加 elementui

 

最基础的写法:

动态的方式

 

 

 

控制台打印

看到结果的我是很不满的,包括写死代码的都要1.5秒

 

==================================================

第一波优化,其实问题可以确定是在列上,一行数据要经过5次遍历,5000行要5000*5;官网找到了jsx的写法,我的是typescript项目所以是tsx

其他图我就不上了,代码如下

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import uiComTableCol from './ui-com-table-col.vue';
import { TabColModel } from './models/TabColModel';
import { FormatKey } from './models/FormatKey';
@Component({
    components: {
        uiComTableCol
    }
})
export default class UIComTableTsx  extends Vue {
    @Prop()
    private data!: any[];
    protected render() {
        let tableColData: TabColModel[] = [];
        tableColData.push(new TabColModel('日期', 'date'));
        tableColData.push(new TabColModel('姓名', 'name'));
        tableColData.push(new TabColModel('地址', 'address'));
        tableColData.push(new TabColModel('年收入', 'fenshu'));
        tableColData.push(new TabColModel('警示级别', 'severity'));
        return (
            <el-table data={this.data} style="width: 100%">
                {
                    tableColData.map((item)=>{
                        console.log(111);
                        return (
                            <el-table-column key={item.prop} prop={item.prop} label={item.label}></el-table-column>
                        );
                    })
                }
            </el-table>
        );
   }
} 

效果上图

减少了列的多次遍历速度快多了,上面打印的111是遍历列的时候打印的,其实也很奇怪,讲道理应该只有初始化的时候打印,往后不该有的

这个效果比写死还好?不存在的,之前我测试,写死的也有这么优秀的,应该是电脑那个时候有些累了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值