github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Table: fix dynamic prop in table-column cause script error. (#1314)

pull/1324/head
FuryBean 2016-11-24 06:54:32 +08:00 committed by cinwell.li
parent 2f3f5eabc1
commit 5c386d5ce8
3 changed files with 197 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/table/src/table-column.js
View File

@ -306,21 +306,21 @@ export default {
width(newVal) { width(newVal) {
if (this.columnConfig) { if (this.columnConfig) {
this.columnConfig.width = newVal; this.columnConfig.width = newVal;
this.owner.scheduleLayout(); this.owner.store.scheduleLayout();
} }
}, },
minWidth(newVal) { minWidth(newVal) {
if (this.columnConfig) { if (this.columnConfig) {
this.columnConfig.minWidth = newVal; this.columnConfig.minWidth = newVal;
this.owner.scheduleLayout(); this.owner.store.scheduleLayout();
} }
}, },
fixed(newVal) { fixed(newVal) {
if (this.columnConfig) { if (this.columnConfig) {
this.columnConfig.fixed = newVal; this.columnConfig.fixed = newVal;
this.owner.scheduleLayout(); this.owner.store.scheduleLayout();
} }
} }
}, },

2
packages/table/src/table-layout.js
View File

@ -149,6 +149,8 @@ class TableLayout {
flattenColumns.forEach((column) => { flattenColumns.forEach((column) => {
if (!column.width && !column.minWidth) { if (!column.width && !column.minWidth) {
column.realWidth = 80; column.realWidth = 80;
} else {
column.realWidth = column.width || column.minWidth;
} }
bodyMinWidth += column.realWidth; bodyMinWidth += column.realWidth;

192
test/unit/specs/table.spec.js
View File

@ -1091,6 +1091,198 @@ describe('Table', () => {
}); });
}); });
describe('dynamic column attribtes', () => {
const DELAY = 50;
it('label', (done) => {
const vm = createVue({
template: `
<el-table :data="testData">
<el-table-column prop="name" :label="label"/>
<el-table-column prop="release" />
<el-table-column prop="director" />
<el-table-column prop="runtime" />
</el-table>
`,
data() {
return {
label: 'name'
};
},
created() {
this.testData = getTestData();
}
}, true);
setTimeout(() => {
expect(vm.$el.querySelector('.el-table__header th .cell').textContent).to.equal('name');
vm.label = 'NAME';
vm.$nextTick(() => {
expect(vm.$el.querySelector('.el-table__header th .cell').textContent).to.equal('NAME');
});
done();
}, DELAY);
});
it('align', (done) => {
const vm = createVue({
template: `
<el-table :data="testData">
<el-table-column prop="name" :align="align"/>
</el-table>
`,
data() {
return {
align: 'left'
};
},
created() {
this.testData = getTestData();
}
}, true);
setTimeout(() => {
expect(vm.$el.querySelectorAll('.el-table__body td.is-right').length === 0).to.be.true;
vm.align = 'right';
vm.$nextTick(() => {
expect(vm.$el.querySelectorAll('.el-table__body td.is-right').length > 0).to.be.true;
});
done();
}, DELAY);
});
it('width', (done) => {
const vm = createVue({
template: `
<el-table :data="testData" :fit="false">
<el-table-column prop="name" :width="width"/>
</el-table>
`,
data() {
return {
width: 100
};
},
created() {
this.testData = getTestData();
}
}, true);
setTimeout(() => {
expect(vm.$el.querySelector('.el-table__body col').getAttribute('width')).to.equal('100');
vm.width = 200;
vm.$nextTick(() => {
expect(vm.$el.querySelector('.el-table__body col').getAttribute('width')).to.equal('200');
});
done();
}, DELAY);
});
it('min-width', (done) => {
const vm = createVue({
template: `
<el-table :data="testData" :fit="false">
<el-table-column prop="name" :min-width="width"/>
</el-table>
`,
data() {
return {
width: 100
};
},
created() {
this.testData = getTestData();
}
}, true);
setTimeout(() => {
expect(vm.$el.querySelector('.el-table__body col').getAttribute('width')).to.equal('100');
vm.width = 200;
vm.$nextTick(() => {
expect(vm.$el.querySelector('.el-table__body col').getAttribute('width')).to.equal('200');
});
done();
}, DELAY);
});
it('fixed', (done) => {
const vm = createVue({
template: `
<el-table :data="testData">
<el-table-column :fixed="fixed" />
<el-table-column prop="release" />
<el-table-column prop="director" />
<el-table-column prop="runtime" />
</el-table>
`,
data() {
return {
fixed: false
};
},
created() {
this.testData = getTestData();
}
}, true);
setTimeout(() => {
expect(!vm.$el.querySelector('.el-table__fixed')).to.be.true;
vm.fixed = true;
vm.$nextTick(() => {
expect(!!vm.$el.querySelector('.el-table__fixed')).to.be.true;
});
done();
}, DELAY);
});
it('prop', (done) => {
const vm = createVue({
template: `
<el-table :data="testData">
<el-table-column :prop="name" />
<el-table-column prop="release" />
<el-table-column prop="director" />
<el-table-column prop="runtime" />
</el-table>
`,
data() {
return {
prop: 'name'
};
},
created() {
this.testData = getTestData();
}
}, true);
setTimeout(() => {
let firstColumnContent = vm.$el.querySelector('.el-table__body td .cell').textContent;
let secondColumnContent = vm.$el.querySelector('.el-table__body td:nth-child(2) .cell').textContent;
expect(firstColumnContent !== secondColumnContent).to.be.true;
vm.prop = 'release';
vm.property = 'release';
vm.$nextTick(() => {
firstColumnContent = vm.$el.querySelector('.el-table__body td .cell').textContent;
secondColumnContent = vm.$el.querySelector('.el-table__body td:nth-child(2) .cell').textContent;
expect(firstColumnContent === secondColumnContent).to.be.true;
});
done();
}, DELAY);
});
});
describe('methods', () => { describe('methods', () => {
const createTable = function(prop = '', opts) { const createTable = function(prop = '', opts) {
return createVue({ return createVue({