mirror of https://github.com/ElemeFE/element
69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
export default {
|
|
created() {
|
|
this.tableLayout.addObserver(this);
|
|
},
|
|
|
|
destroyed() {
|
|
this.tableLayout.removeObserver(this);
|
|
},
|
|
|
|
computed: {
|
|
tableLayout() {
|
|
let layout = this.layout;
|
|
if (!layout && this.table) {
|
|
layout = this.table.layout;
|
|
}
|
|
if (!layout) {
|
|
throw new Error('Can not find table layout.');
|
|
}
|
|
return layout;
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.onColumnsChange(this.tableLayout);
|
|
this.onScrollableChange(this.tableLayout);
|
|
},
|
|
|
|
updated() {
|
|
if (this.__updated__) return;
|
|
this.onColumnsChange(this.tableLayout);
|
|
this.onScrollableChange(this.tableLayout);
|
|
this.__updated__ = true;
|
|
},
|
|
|
|
methods: {
|
|
onColumnsChange() {
|
|
const cols = this.$el.querySelectorAll('colgroup > col');
|
|
if (!cols.length) return;
|
|
const flattenColumns = this.tableLayout.getFlattenColumns();
|
|
const columnsMap = {};
|
|
flattenColumns.forEach((column) => {
|
|
columnsMap[column.id] = column;
|
|
});
|
|
for (let i = 0, j = cols.length; i < j; i++) {
|
|
const col = cols[i];
|
|
const name = col.getAttribute('name');
|
|
const column = columnsMap[name];
|
|
if (column) {
|
|
col.setAttribute('width', column.realWidth || column.width);
|
|
}
|
|
}
|
|
},
|
|
|
|
onScrollableChange(layout) {
|
|
const cols = this.$el.querySelectorAll('colgroup > col[name=gutter]');
|
|
for (let i = 0, j = cols.length; i < j; i++) {
|
|
const col = cols[i];
|
|
col.setAttribute('width', layout.scrollY ? layout.gutterWidth : '0');
|
|
}
|
|
const ths = this.$el.querySelectorAll('th.gutter');
|
|
for (let i = 0, j = ths.length; i < j; i++) {
|
|
const th = ths[i];
|
|
th.style.width = layout.scrollY ? layout.gutterWidth + 'px' : '0';
|
|
th.style.display = layout.scrollY ? '' : 'none';
|
|
}
|
|
}
|
|
}
|
|
};
|