Cascader: fix display errors (#16665)

packages/cascader-panel/src/cascader-node.vue

@@ -205,20 +205,19 @@
       const disabled = !checkStrictly && isDisabled;
       const events = { on: {} };
 
-      if (!isLeaf) {
+      if (expandTrigger === 'click') {
-        if (expandTrigger === 'click') {
+        events.on.click = this.handleExpand;
-          events.on.click = this.handleExpand;
+      } else {
-        } else {
+        events.on.mouseenter = e => {
-          events.on.mouseenter = e => {
+          this.handleExpand();
-            this.handleExpand();
+          this.$emit('expand', e);
-            this.$emit('expand', e);
+        };
-          };
+        events.on.focus = e => {
-          events.on.focus = e => {
+          this.handleExpand();
-            this.handleExpand();
+          this.$emit('expand', e);
-            this.$emit('expand', e);
+        };
-          };
+      }
-        }
+      if (isLeaf && !isDisabled && !checkStrictly && !multiple) {
-      } else if (!isDisabled && !checkStrictly && !multiple) {
         events.on.click = this.handleCheckChange;
       }
 

test/unit/specs/cascader-panel.spec.js

@@ -88,6 +88,23 @@ const options2 = [{
   }]
 }];
 
+const options3 = [
+  {
+    value: 'shanghai',
+    label: '上海',
+    children: [
+      {
+        value: 'baoshan',
+        label: '宝山'
+      }
+    ]
+  },
+  {
+    value: 'beijing',
+    label: '北京'
+  }
+];
+
 const getMenus = el => el.querySelectorAll('.el-cascader-menu');
 const getOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node');
 const getValidOptions = (el, menuIndex) => getMenus(el)[menuIndex].querySelectorAll('.el-cascader-node[tabindex="-1"]');
@@ -532,5 +549,33 @@ describe('CascaderPanel', () => {
     await waitImmediate();
     expect(vm.value.length).to.equal(3);
   });
+
+  it('click leaf hidden children', async() => {
+    vm = createVue({
+      template: `
+        <el-cascader-panel
+          ref="panel"
+          v-model="value"
+          :options="options"></el-cascader-panel>
+      `,
+      data() {
+        return {
+          value: [],
+          options: options3
+        };
+      }
+    }, true);
+
+    const el = vm.$el;
+    const elOptions = getOptions(el, 0);
+    const firstOption = elOptions[0];
+    const twoOption = elOptions[1];
+    firstOption.click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(2);
+    twoOption.click();
+    await waitImmediate();
+    expect(getMenus(el).length).to.equal(1);
+  });
 });