[Bug Report] el-cascader click option content can not trigger content change

[sunchenguang]

Element UI version

2.11.1

OS/Browsers version

chrome 75 macos10.14.3

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/gxzyar5p/2/

Steps to reproduce

1. click 北京 content, but cascader do not trigger content change
2. only click the radio button, can trigger content change
3. it is not conform to normal usage habits

What is Expected?

1. click 北京 content, cascader can trigger content change

What is actually happening?

1. click 北京 content, but cascader can not trigger content change

[element-bot]

Translation of this issue:

Element UI version

2.11.1

OS/Browsers version

Chrome 75 MacOS 10.14.3

Vue version

2.6.10

Reproduction Link

Https://jsfiddle.net/gxzyar5p/2/

Steps to reproduce

1. click Beijing content, but cascader do not trigger content change

2. Only click the radio button, can trigger content change

3. It is not conform to normal usage habits

What is Expected?

1. click Beijing content, cascader can trigger content change

What is actually happening?

1. click Beijing content, but cascader can not trigger content change

[sunchenguang]

why no person care for this problem???

[maodelife]

why no person care for this problem???

I care. 看来，ele不打算改了。我最近升级发现了这个问题。

[VitaliZinkevich]

Same for me. Is Element UI gonna fix it? Guys, did anybody find the way to do it?

[VitaliZinkevich]

It can be resolve like this (for 2 level cascader):
Example
<el-cascader v-model ="doct.typeParDoc" placeholder="Тип документа" :options="parsDoc" change-on-select clearable @change="handleTypeParDocChange" > <template slot-scope="{ node, data }"> <span @click="cascaderClick(node, data)">{{ data.label }}</span> </template> </el-cascader>

cascaderClick(node, data){ let val = []; if(!!node.parent){ val.push(node.parent.value); } val.push(node.value); this.$set(this.doct, "typeParDoc", val); },

[dadiyang]

look at this issue #15611
I resolved it in a different way:

• add an empty node to each leaf nodes

{
      value: "",
      label: "",
      leaf: true,
      disabled: true
}

• listen to expand-change and change event simultaneously, and bind it to the same method
• hide the radios by css

#15611 (comment)

[liuy666]

I have also encountered this problem.Here is a good solution so far:
Download the source code, install the dependencies, modify the following location, and run the command 'NPM run dist' package.Then replace the node_modules/element-ui/lib file in your project with the new cascader.js and cascader-panel.js from the lib folder.

renderContent(h) {
    const { panel, node } = this;
    const render = panel.renderLabelFn;
    const vnode = render
        ? render({ node, data: node.data })
        : null;
    const labelEvent = { on: { click: this.handleCheckChange } };
    return (
        <span class="el-cascader-node__label" {...labelEvent}>{ vnode || node.label }</span>
    );
}

[zk118]

Fix it please, it is not UX conform at all...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[fengitel]

Is there any updates on this issue?

[moulib-narayana]

@element-bot This issue is not resolved yet even in the latest element plus version. Need an immediate resolution