吐槽!iview的table组件

 

为什么要吐槽iview的table组件呢?

首先iview的table的使用体验十分的不友好,每次修改数据都会重刷整个表格,性能极差,因为重刷表格会导致自动失焦等问题!

vue不是有diff算法吗?重刷表格数据没有发生变化部分是不会重新渲染的,性能为什么会差呢?

是的,diff算法是可以优化vnode的渲染问题,但是前提是key,tag等属性没有发生变化的情况,可是万恶的iview table既然私自修改了key的值,导致diff的优化失效。

如何解决这个问题?

table组件data属性接收的数据源与实际操作的数据分离,例如:以下例子的tempData与data。

<Table border :columns="columns"  :data="tempData"></Table>
export default {
    data:{
        tempData:[],
        columns:[
                {
                    title:'商品价格(元)',
                    width:120,
                    align: 'center',
                    render:(h,params)=>{
                        let data = this.data[params.index];  // 实际更改的是this.data的数据,因为tempData没有改变,所以table不会重新渲染
                        return <i-input maxlength={8} number value={data.value} on-on-blur={(e)=>{data.value=e.target.value} />;
                    }
                },
        ],
        data:[]
    },
    watch:{
        data(val){
            this.tempData = util.deepCopy(val);
        },
   }
}

 

table组件的内容主题table-body组件,table-body的data属性接收的是rebildData

            <div :class="[prefixCls + '-body']" :style="bodyStyle" ref="body" @scroll="handleBodyScroll"
                v-show="!((!!localeNoDataText && (!data || data.length === 0)) || (!!localeNoFilteredDataText && (!rebuildData || rebuildData.length === 0)))">
                <table-body
                    ref="tbody"
                    :prefix-cls="prefixCls"
                    :styleObject="tableStyle"
                    :columns="cloneColumns"
                    :data="rebuildData"
                    :columns-width="columnsWidth"
                    :obj-data="objData"></table-body>
            </div>

table组件内部实现深度监听了data属性,当data的任意属性发生变化就会重新生成rebuildData。(深度拷贝一份原有的data)为什么要拷贝一份呢?

解:为了防止table组件内部直接通过params.row直接修改数据源,直接修改数据源容易导致bug难追溯,数据容易错乱等情况,增加维护成本!

       watch: {
            data: {
                handler () {
                    const oldDataLen = this.rebuildData.length;
                    this.objData = this.makeObjData();
                    this.rebuildData = this.makeDataWithSortAndFilter();
                    this.handleResize();
                    if (!oldDataLen) {
                        this.fixedHeader();
                    }
                    // here will trigger before clickCurrentRow, so use async
                    setTimeout(() => {
                        this.cloneData = deepCopy(this.data);
                    }, 0);
                },
                deep: true
            },
  .....  
}

生成新的data数据,并重置每一项数据的_rowKey属性(该属性被table-tr组件当作key来使用),_rowKey是全局递增的,每一次table重新render,_rowKey都会不断递增,导致diff算法失效(导致表格重新渲染的元凶)

            makeDataWithSortAndFilter () {
                let data = this.makeDataWithSort();
                this.cloneColumns.forEach(col => data = this.filterData(data, col));
                return data;
            },
            makeDataWithSort () {
                let data = this.makeData();
                let sortType = 'normal';
                let sortIndex = -1;
                let isCustom = false;

                for (let i = 0; i < this.cloneColumns.length; i++) {
                    if (this.cloneColumns[i]._sortType !== 'normal') {
                        sortType = this.cloneColumns[i]._sortType;
                        sortIndex = i;
                        isCustom = this.cloneColumns[i].sortable === 'custom';
                        break;
                    }
                }
                if (sortType !== 'normal' && !isCustom) data =  this.sortData(data, sortType, sortIndex);
                return data;
            },
// 生成新的data makeData () { let data
= deepCopy(this.data); data.forEach((row, index) => { row._index = index; row._rowKey = rowKey++; //rowKey 全局的一个变量 初始值 rowKey=0 }); return data; },

 

posted @ 2019-04-18 16:44  Ricky_boke  阅读(5765)  评论(1编辑  收藏