Comments (2)
do you have a reproduce demo
from v2-table.
@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);
}
}
from v2-table.
Related Issues (20)
- 无边框多选时 选择框的列表出现了 border
- v2-table scroll issue HOT 7
- How to working well on SSR (Nuxt)? HOT 1
- Refreshing data in table + add icon to call method HOT 4
- filter table HOT 1
- row-class-name attribute function return the row with undefined HOT 1
- how can I make a cutom header on this v2 table ? HOT 2
- event to check or uncheck checkboxlist
- Use withouth webpack HOT 1
- List array passed by props HOT 1
- How to insert empty full-width row?
- How to show nested objects table
- handleSelectChange doesn't work if the HTML in vue is accessing the data point being updated from the handle select change. HOT 2
- Multi-select error when enable lazy-load HOT 1
- TypeError: i.a is not a constructor HOT 2
- Is there a way to set specific rows to be checked? HOT 2
- 多选时不能取消选中
- the problem with the initialization BeautifyScrollbar HOT 7
- Y Scroll Bar Not Always Shown HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from v2-table.