1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- 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(layout) {
- const cols = this.$el.querySelectorAll('colgroup > col');
- if (!cols.length) return;
- const flattenColumns = layout.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';
- }
- }
- }
- };
|