v2-table

v2-table copied to clipboard

My columns are the date, which is depended on the user's time select. Such as 2018-08-01, 2018-08-02，2018-08-03 and so on. So my column slot like following:

<v2-table>
  <v2-table-column v-for="(column,index) in columns" :key="index" :label="column.label" :width="column.width" :prop="column.key"></v2-table-column>
</v2-table>

when columns are updated, table will not be updated

do you have a reproduce demo

@dwqs I had got my aim with my custom code. Because the component instance of columns'slots can't be got in updateColumnsWidth function, which results in the wrong width of the table when columns' slot updated. Your code only call the updateColumnsWidth in mounted hook. So I recall the handleWinResize in updated hook with this.$nextTick method. Of course, I add some computed attributes in child component "table-body.js"

some code snippets:

// table.vue
// to update the columns width
        updated () {
            this.$nextTick(function () {
                this.handleWinResize();
                if (this.rowsChange) {
                    this.updateScrollbar(true);
                    this.rowsChange = false;
                }        
            });
        }

// table.vue
// detect neccessary resize
            handleWinResize () {
                const newColumns = this.$slots.default.filter(function (column) {
                    return column.componentInstance && column.componentInstance.$options.name === 'v2-table-column';
                }).map(function (column) {
                    return column.componentInstance;
                });

                if (this.$el.clientWidth === this.containerWidth && this.columns.length === newColumns.length) {
                    return;
                } else {
                    this.bodyMinWidth = undefined;
                }

                this.containerWidth = this.$el.clientWidth;
                this.containerHeight = this.$el.clientHeight;
                
                // this.columns = [].concat(this.updateColumnsWidth(this.columns));
                this.columns = [].concat(this.updateColumnsWidth());

                if (this.rightColumns.length) {
                    this.rightColumns = [].concat(this.getColumnComponentsByType(this.columns, 'right'));
                }
                if (this.leftColumns.length) {
                    this.leftColumns = [].concat(this.getColumnComponentsByType(this.columns, 'left'));
                }

                if (this.scrollbar) {
                    this.updateScrollbar(true);
                }
            }