动态表格优化、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是遍历列的时候打印的，其实也很奇怪，讲道理应该只有初始化的时候打印，往后不该有的

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