diff --git a/packages/cascader/src/cascader.vue b/packages/cascader/src/cascader.vue index bb875229c4..e0b9a965c9 100644 --- a/packages/cascader/src/cascader.vue +++ b/packages/cascader/src/cascader.vue @@ -300,6 +300,9 @@ export default { }, watch: { + disabled() { + this.computePresentContent(); + }, value(val) { if (!isEqual(val, this.checkedValue)) { this.checkedValue = val; diff --git a/test/unit/specs/cascader.spec.js b/test/unit/specs/cascader.spec.js index 97cab396f2..d0d4b7d217 100644 --- a/test/unit/specs/cascader.spec.js +++ b/test/unit/specs/cascader.spec.js @@ -50,6 +50,7 @@ const options = [{ const getMenus = el => el.querySelectorAll('.el-cascader-menu'); const getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node'); const selectedValue = ['zhejiang', 'hangzhou', 'xihu']; +const getCloseButton = el => el.querySelectorAll('i.el-tag__close'); describe('Cascader', () => { let vm; @@ -242,12 +243,14 @@ describe('Cascader', () => { `, data() { return { value: [], options, + disabled: false, props: { multiple: true } @@ -258,6 +261,7 @@ describe('Cascader', () => { getOptions(document.body, 0)[0].querySelector('.el-checkbox input').click(); await waitImmediate(); expect(vm.value.length).to.equal(3); + expect(getCloseButton(vm.$el).length).to.equal(3); const tags = vm.$el.querySelectorAll('.el-tag'); const closeBtn = tags[0].querySelector('.el-tag__close'); @@ -267,6 +271,10 @@ describe('Cascader', () => { await waitImmediate(); expect(vm.value.length).to.equal(2); expect(vm.$el.querySelectorAll('.el-tag').length).to.equal(2); + + vm.disabled = true; + await waitImmediate(); + expect(getCloseButton(vm.$el).length).to.equal(0); }); it('clearable in multiple mode', async() => {