<think>好的，我现在需要解决用户的问题：如何在Element Plus的el-cascader组件中实现多选级联选择器，并确保取值仅为最后一级的数据。首先，我需要回顾一下Element UI和Element Plus的相关文档，特别是关于el-cascader组件的多选配置。
根据用户提供的引用，特别是引用[1]提到Element UI的el-cascader只有最后一级可以多选，而引用[3]则讨论了取值逻辑，即无论勾选哪一级，最终只保留最后一级的数据。这说明用户希望即使在多选的情况下，即使选择了父节点，也仅保留其子节点的最后一级数据。例如，如果有一个层级结构为省-市-区，用户勾选了某个省，那么应该自动选择该省下所有的区，而不是省或市本身。
接下来，我需要考虑如何实现这一点。根据Element Plus的文档，el-cascader的多选模式（props.multiple）确实允许最后一级多选。但默认情况下，用户选择父节点时，组件会包含所有层级的节点。所以需要自定义处理选中的值，只保留最后一级的数据。
可能的步骤包括：
1. 配置el-cascader为多选模式，并设置props.checkStrictly为true？或者可能需要通过其他属性控制节点的选择方式。但根据引用[1]，Element UI的默认行为是只有最后一级可选，但多选时可能需要调整。
这里可能存在误解，需要仔细查看文档。在Element UI中，checkStrictly设置为true可以允许任意级节点选择，但用户希望的是即使选择父节点，也只取最后一级。所以可能需要结合其他方法。
2. 使用@change事件来捕获用户的选择，然后对选中的节点进行处理，过滤掉非最后一级的节点。例如，当用户选择了一个父节点，我们需要找到该父节点下的所有最后一级子节点，并将这些子节点的值加入到最终的结果中。
3. 数据结构方面，可能需要递归遍历每个选中的节点，检查其是否有子节点。如果没有，则保留；如果有，则替换为所有最后一级的子节点。
但如何具体实现呢？比如，用户选择了一个父节点，这时候组件返回的值可能包含该父节点的值。我们需要在事件处理函数中，将这个父节点的值替换为它所有最后一级子节点的值。这需要访问组件的数据源，根据节点的value找到对应的子节点，并递归直到最后一级。
例如，假设数据结构是树形结构，每个节点有value、label、children。当用户选中某个节点时，需要检查该节点是否有children，如果有，则将其children展开，直到叶子节点，然后将这些叶子节点的value收集起来，替换原来的选中值。
这个过程可能需要一个递归函数，例如：
function getLeafNodes(node) {
if (!node.children || node.children.length === 0) {
return [node];
} else {
return node.children.flatMap(child => getLeafNodes(child));
}
}
然后在@change事件处理中，遍历所有选中的节点，对每个节点应用这个函数，收集所有叶子节点的value，最后去重，并更新绑定的数组。
不过，需要注意性能问题，特别是当数据层级较深或数据量较大时，递归可能会影响性能。但一般情况下，级联选择器的数据量不会太大，所以应该可以接受。
接下来，如何将这个过程集成到el-cascader组件中。用户需要绑定一个v-model数组，比如selectedValues，然后在@change事件中处理这个数组，过滤掉非叶子节点的值，替换为对应的叶子节点的值。
此外，可能还需要注意组件是否支持动态修改选中的值，比如在事件处理函数中更新selectedValues数组，可能会触发重新渲染，需要避免死循环。
另外，根据引用[3]，之前的实现可能是在处理数据时，根据层级来判断，如果同时勾选了父级和子级，则只保留子级。例如，如果用户勾选了省、市、区中的某些节点，那么最终结果只保留区级的节点。但如何判断某个节点是否是最后一级呢？
这需要知道每个节点的层级深度，或者在数据中预先标记是否为叶子节点。Element的el-cascader组件中的每个节点可能有一个leaf属性，或者可以通过是否有children来判断是否为叶子节点。
因此，在处理选中的节点时，对于每个节点的value，需要找到对应的节点对象，然后检查它是否是叶子节点。如果不是，则找到它的所有叶子节点，并将它们的value加入结果中。
因此，具体的实现步骤可能如下：
1. 配置el-cascader组件为多选模式，并设置props.checkStrictly为false（默认），因为希望父节点的选择能自动关联子节点。或者可能需要设置为true以允许选择任意节点，但需要进一步处理。
这里可能需要澄清：checkStrictly为true时，可以选中任意节点，但级联关系不会自动关联。当设置为false时，选中父节点会自动选中所有子节点。用户的需求是，无论用户选择的是父节点还是子节点，最终取值只保留最后一级的节点。例如，如果用户选中了父节点，组件应该自动选中所有最后一级的子节点，并且这些子节点的值应该被收集。
但是，默认情况下，当checkStrictly为false时，选中父节点会将所有子节点也选中，包括中间层级的节点。此时，用户得到的值可能包含父节点和所有子节点的value。所以需要过滤掉非最后一级的节点。
因此，正确的做法可能是在事件处理函数中，遍历所有选中的节点，检查每个节点是否为最后一级，如果是则保留，否则替换为所有最后一级的子节点。
这需要访问组件的数据源，即根据value找到对应的节点，然后进行判断。
所以，关键点在于如何根据value找到对应的节点。这可能需要一个函数，遍历整个数据树，查找匹配value的节点。
例如，定义一个findNode函数：
function findNode(nodes, value) {
for (const node of nodes) {
if (node.value === value) {
return node;
}
if (node.children) {
const found = findNode(node.children, value);
if (found) return found;
}
}
return null;
}
然后，在处理选中的值时，对于每个选中的value，找到对应的节点，检查是否为叶子节点。如果不是，则收集所有叶子节点的value，并替换原来的value。
然后将所有处理后的value合并，去重，更新到绑定的数组中。
但需要注意，这样处理可能会导致重复的叶子节点被加入，例如如果用户同时选择了一个父节点和它的某个子节点，那么父节点被展开后，可能会包含该子节点的value，导致重复。因此需要去重。
此外，还需要考虑性能问题，特别是在处理大量数据时。
综上，具体的实现步骤可能如下：
1. 设置el-cascader为多选模式：
<el-cascader
v-model="selectedValues"
:options="options"
:props="cascaderProps"
@change="handleChange"
multiple
/>
其中，cascaderProps可能需要设置某些属性，比如checkStrictly为false，或者是否需要其他配置？
根据Element Plus文档，当使用多选时，props.multiple为true，而props.checkStrictly默认为false，这意味着选择父节点会选中所有子节点。但用户希望的是，无论选择哪一级，只保留最后一级的数据。例如，如果用户选择父节点A，而A的子节点是B，B的子节点是C（最后一级），那么选中A时，实际应选中所有C的节点。
但默认情况下，当选中父节点A时，选中的值会是A、B、C？或者可能不是，需要验证。例如，可能选中的是A，但子节点自动被选中。此时，selectedValues数组中将包含A以及所有子节点的值？或者可能不是，需要查阅Element Plus的el-cascader多选行为。
或者，可能当checkStrictly为false时，选中父节点会自动选中所有子节点，但selectedValues数组中只包含父节点的value。这可能不太对，需要明确。
此时可能需要测试或查阅文档。根据Element UI的文档，当多选且checkStrictly为false时，选中父节点会将其所有子节点也选中，并且selectedValues数组中包含父节点和所有子孙节点的value。或者可能只包含父节点的value？这需要确认。
例如，假设有一个层级结构：A → B → C。当用户选中A，并且checkStrictly为false时，是否会导致A、B、C都被选中？
根据Element UI的示例，当checkStrictly为false时，选中父节点会自动选中所有子节点。例如，在单选模式下，选中父节点会自动选择最后一级。但在多选模式下，可能行为不同。
根据用户提供的引用[3]，在Element UI中，当多选时，勾选父节点会包含所有子节点的最后一级。例如，勾选一级节点，结果取一级；勾选一级和二级，结果取二级；勾选一级、二级、三级，结果取三级。这说明，默认情况下，如果勾选父节点，实际存储的是父节点的值，但用户希望根据最深层级自动取最后一级。所以需要手动处理，将父节点的值替换为其最后一级子节点的值。
因此，用户的需求是，不管用户勾选的是哪一级节点，最终取值时只保留该节点下的最后一级节点。例如，如果用户勾选了某个省（一级节点），则实际取该省下的所有区（三级节点）的值。这需要手动处理，因为组件本身可能不会自动这样做。
因此，处理逻辑应为：
当用户选择某些节点后，遍历所有选中的节点，对每个节点检查是否为最后一级。如果不是，则找到该节点的所有最后一级子节点，将这些子节点的value加入结果中，并排除当前节点的value。最后，去重得到最终结果。
例如，用户选中了节点A（非最后一级）和节点C（最后一级）。处理时，节点A被展开为所有最后一级子节点（比如C1、C2、C3），而节点C被保留。最终结果为C1、C2、C3、C。
所以，在代码中，处理函数handleChange需要执行以下步骤：
1. 接收当前选中的值数组selectedValues。
2. 遍历数组中的每个value。
3. 对于每个value，找到对应的节点。
4. 如果该节点是最后一级（没有children），则保留。
5. 如果该节点不是最后一级，则收集其所有最后一级子节点的value。
6. 将所有收集到的value合并，去重，得到新的数组。
7. 更新绑定的selectedValues为这个新数组。
这样，无论用户选择的是哪一级节点，最终结果都是最后一级的value。
接下来，如何实现这一点。首先，需要有一个方法根据value找到对应的节点。这需要遍历整个options树。例如，写一个函数findNodeByValue(options, value)，递归查找。
其次，需要收集某个节点下的所有最后一级子节点。可以写一个函数collectLeafNodes(node)，递归收集所有叶子节点。
例如：
function collectLeafNodes(node) {
let leaves = [];
if (node.children && node.children.length > 0) {
node.children.forEach(child => {
leaves.push(...collectLeafNodes(child));
});
} else {
leaves.push(node);
}
return leaves;
}
然后，在handleChange函数中：
handleChange(values) {
let result = [];
values.forEach(value => {
const node = findNodeByValue(this.options, value);
if (node) {
if (node.children && node.children.length > 0) {
// 非最后一级，收集所有叶子节点
const leaves = collectLeafNodes(node);
leaves.forEach(leaf => result.push(leaf.value));
} else {
// 最后一级，直接添加
result.push(value);
}
}
});
// 去重
result = Array.from(new Set(result));
// 更新selectedValues
this.selectedValues = result;
}
不过，这样的处理可能会导致无限循环，因为当selectedValues被更新时，会再次触发@change事件。因此，可能需要添加一个标志位来避免重复触发，或者在更新时判断是否已经处理过。
例如：
data() {
return {
selectedValues: [],
isHandlingChange: false
};
},
methods: {
handleChange(values) {
if (this.isHandlingChange) return;
this.isHandlingChange = true;
// 处理values...
this.selectedValues = processedValues;
this.$nextTick(() => {
this.isHandlingChange = false;
});
}
}
这样可以防止handleChange被重复触发。
另外，需要注意，el-cascader的v-model绑定的数组可能需要被同步更新。例如，当用户选择节点时，handleChange被触发，处理后的值会更新到selectedValues，此时组件应该显示处理后的叶子节点的标签，而不是原来的父节点标签。但可能存在问题，因为el-cascader内部可能存储的是用户选择的原始节点，而不是处理后的值。因此，可能需要额外处理标签的显示，或者确保处理后的值对应的节点确实存在。
例如，假设用户选择了一个父节点A，其值为'a'，处理后替换为子节点C1（值'c1'）和C2（值'c2'）。此时，selectedValues变成['c1','c2']，而el-cascader需要能够显示这些值对应的标签。因此，必须确保options中存在这些叶子节点的value对应的节点。
这通常是成立的，因为叶子节点的value本来就是数据的一部分。
但可能存在一个问题：当用户手动取消选择某个叶子节点时，处理函数会再次将其添加回来，因为父节点可能仍然被选中。因此，这种处理方式可能导致无法取消选中某些节点。例如，用户选择父节点A，处理后添加了c1和c2。如果用户再手动取消c1，此时selectedValues变成['c2']，但由于父节点A可能仍然被选中（因为el-cascader的多选行为），handleChange会再次被触发，导致c1被重新添加。
这说明这种方法可能存在逻辑上的问题。如何处理这种情况呢？
可能，用户的需求是：无论用户选择的是父节点还是子节点，最终只保留最后一级的值。因此，当用户选择父节点时，所有子节点的最后一级都会被选中；当用户取消某个子节点时，需要找到对应的父节点是否仍然被选中，从而决定是否保留该子节点的值。
这变得非常复杂，可能需要更深入的处理。例如，当用户取消某个子节点时，需要检查是否其父节点被选中，如果是，则可能需要重新处理父节点的选中状态。
这可能意味着，这种处理方式在用户交互上存在挑战，因为用户可能无法直接取消由父节点自动选中的子节点。
因此，可能更好的方法是，在界面上不允许用户选择非最后一级的节点，即只能选择最后一级的节点。这样，就不需要处理父节点的转换问题。但根据引用[1]，Element UI的el-cascader默认只有最后一级可以多选，所以用户可能已经配置了组件为最后一级可选，但如何确保用户只能选择最后一级？
或者，可能用户的问题实际上希望即使选择父节点，也只取其最后一级的值，而不管组件是否允许选择父节点。这时候，可能需要在数据源中将非最后一级的节点设置为不可选，或者通过props配置来限制只能选择最后一级。
例如，在el-cascader的props中设置props.checkStrictly为false，并设置props.multiple为true，同时通过props.props的配置，如是否允许选择非叶子节点：
props: {
multiple: true,
checkStrictly: false,
emitPath: false,
expandTrigger: 'hover',
// 其他配置
}
但具体如何配置可能需要参考Element Plus的文档。例如，Element Plus的el-cascader有一个props属性叫`props`，其中可以设置`checkStrictly`、`multiple`、`emitPath`等。另外，可能有一个`leafOnly`选项，或者类似属性，用于控制是否只返回最后一级的值。
根据Element Plus的文档，当使用多选时，有一个`props`配置中的`multiple`为true，同时，是否有一个属性可以控制只选择叶子节点？
例如，在Element UI的el-cascader中，有一个`props`的`leafOnly`属性，当设置为true时，多选情况下只允许选中最后一级节点。但需要验证这一点。
查阅Element Plus文档，发现对于多选级联选择器，可以通过设置`props.leaf`来控制是否为叶子节点，但可能需要结合其他属性。例如，在Element UI中，有一个`props`的`leafOnly`属性，但在Element Plus中可能有所不同。
例如，在Element Plus的el-cascader文档中，多选模式下，有一个`props`配置项，其中没有直接提到leafOnly，但可以通过设置checkStrictly为false，这样用户只能选择最后一级节点。或者可能不是，需要实际验证。
假设在Element Plus中，当checkStrictly为false时，用户只能选择最后一级节点，并且选中父节点会自动选中所有子节点。但如果是这样的话，用户的需求可能已经通过配置实现。但根据引用[1]，Element UI的el-cascader默认只有最后一级可以多选，所以可能用户的问题是在多选时，选中父节点会自动选中所有子节点（包括中间层级），而用户希望只保留最后一级的值。
例如，假设数据结构是省-市-区，当用户选中省，会自动选中该省下的所有市和区？或者只选中区？
这取决于组件的配置。如果checkStrictly为false，可能选中父节点（省）会导致所有子节点（市和区）被选中。而用户希望只保留区的值，所以需要过滤掉非最后一级的值。
因此，不管组件如何配置，最终处理选中的值时，需要过滤掉非最后一级的节点。因此，之前的handleChange处理函数是必要的。
但可能需要结合组件的事件和值处理。例如，即使组件允许选择任何层级的节点，处理函数会将其转换为最后一级的值。
因此，总结解决方案：
1. 配置el-cascader为多选模式，允许用户选择任意节点。
2. 使用@change事件处理选中的值，将其转换为最后一级的节点。
3. 在事件处理函数中，遍历所有选中的节点，替换非最后一级的节点为它们的最后一级子节点。
4. 更新绑定的数组，确保只包含最后一级的值。
这样，用户无论选择哪一层级的节点，最终结果都只保留最后一级的数据。
接下来，如何编写代码示例。例如：
在模板中：
<el-cascader
v-model="selectedValues"
:options="options"
:props="cascaderProps"
@change="handleCascaderChange"
multiple
/>
在脚本中：
data() {
return {
selectedValues: [],
options: [
{
value: 'province1',
label: 'Province 1',
children: [
{
value: 'city1',
label: 'City 1',
children: [
{ value: 'district1', label: 'District 1' },
{ value: 'district2', label: 'District 2' }
]
},
// 更多城市...
]
},
// 更多省份...
],
cascaderProps: {
multiple: true,
checkStrictly: false, // 允许自动关联子节点
emitPath: false, // 只存储节点值，不存储路径
// 其他配置...
}
};
},
methods: {
handleCascaderChange(values) {
const processedValues = this.processValues(values);
// 避免无限循环
if (JSON.stringify(processedValues) !== JSON.stringify(this.selectedValues)) {
this.selectedValues = processedValues;
}
},
processValues(values) {
let result = [];
values.forEach(value => {
const node = this.findNodeByValue(this.options, value);
if (node) {
const leaves = this.collectLeafNodes(node);
leaves.forEach(leaf => result.push(leaf.value));
}
});
// 去重
return [...new Set(result)];
},
findNodeByValue(nodes, targetValue) {
for (const node of nodes) {
if (node.value === targetValue) {
return node;
}
if (node.children) {
const found = this.findNodeByValue(node.children, targetValue);
if (found) return found;
}
}
return null;
},
collectLeafNodes(node) {
let leaves = [];
if (node.children && node.children.length > 0) {
node.children.forEach(child => {
leaves.push(...this.collectLeafNodes(child));
});
} else {
leaves.push(node);
}
return leaves;
}
}
这样，当用户选择任何节点时，handleCascaderChange会将选中的值转换为所有最后一级子节点的值。例如，选择Province 1会自动添加District 1和District 2到selectedValues中。
但需要注意，如果用户选择了一个中间层级的节点，如City 1，此时该节点的子节点是District 1和District 2，处理后的值会是这两个区的value。
另外，当用户手动取消某个区的选择时，处理函数会检查该区是否属于某个被选中的父节点。例如，如果用户之前选择了Province 1，导致选中了District 1和2，现在取消District 1，那么处理后的值会变为District 2。但根据上述代码，handleCascaderChange会被触发，values参数此时是['district2']。然后processValues处理时，遍历'district2'，找到对应的节点（已经是叶子节点），直接加入结果，所以最终结果还是['district2']。这正确。
但问题在于，如果用户选择的是City 1，此时处理后的值会是District 1和2。如果用户随后取消District 1，那么selectedValues变为['district2']，但是如果City 1仍然被选中，那么处理函数会再次将District 1和2加入，导致selectedValues又变成两者都有。
这表明代码中存在逻辑错误，因为当用户取消某个子节点时，其父节点可能仍然处于选中状态，导致处理函数重新添加所有子节点。
因此，这说明这种方法不可行，因为父节点的选中状态会导致无法取消子节点。
因此，需要找到另一种方法，确保选中的值只包含用户显式选择的最后一级节点，或者显式选择的父节点对应的最后一级子节点，并且在用户取消子节点时，能够正确反映。
这可能意味着，el-cascader的多选模式在这种情况下并不适用，或者需要更复杂的处理，例如：
- 不允许用户选择非最后一级的节点，即禁用非最后一级的复选框。
如何实现这一点？在Element UI/Plus中，可以通过props中的disabled属性来禁用某些节点的复选框。例如，在数据中为非最后一级的节点设置disabled: true，这样用户无法选择它们，只能选择最后一级的节点。
例如，修改数据：
options: [
{
value: 'province1',
label: 'Province 1',
disabled: true, // 禁用该节点，无法选择
children: [
{
value: 'city1',
label: 'City 1',
disabled: true, // 禁用该节点
children: [
{ value: 'district1', label: 'District 1' },
{ value: 'district2', label: 'District 2' }
]
},
// 更多城市...
]
},
// 更多省份...
]
这样，用户只能选择最后一级的district节点。但这种方法需要动态设置disabled属性，即在数据生成时，为所有非最后一级的节点设置disabled: true。这可以通过递归处理数据来实现。
例如，在数据准备阶段：
function processData(nodes) {
return nodes.map(node => {
if (node.children && node.children.length > 0) {
return {
...node,
disabled: true,
children: processData(node.children)
};
} else {
return node;
}
});
}
这样，所有非叶子节点的disabled属性为true，用户无法选中它们，只能选择叶子节点。这样，selectedValues数组中只会包含最后一级的值，无需后续处理。
这种方法可能更简单，也更可靠。但需要确保数据预处理正确，禁用所有非叶子节点。
因此，这可能是一个更有效的解决方案。用户的问题可能源于希望允许用户选择父节点（例如省或市），但取值时只保留最后一级。但这种方法可能不符合用户交互的预期，因为用户无法直接选择父节点，只能选择最后一级。
但根据引用[3]，用户的需求是当勾选父节点时，只保留最后一级的值，例如，勾选省时，取省下的所有区。因此，可能用户希望父节点的选择可以批量选择所有最后一级子节点，而不是逐一点选。
因此，回到之前的处理方式，即在用户选择父节点时，自动将其转换为所有最后一级子节点的值。但需要解决用户取消子节点时的冲突问题。
可能的解决方案是，在每次处理时，清除所有非最后一级的节点，并将其替换为对应的叶子节点。这样，即使用户选择了一个父节点和一个子节点，处理后的结果将包含父节点下的所有叶子节点和该子节点。但如果用户取消某个叶子节点，处理函数将不再包含它，即使父节点仍然被选中。
但问题在于，el-cascader的选中状态可能仍然显示父节点为选中状态，但实际存储的值是叶子节点。这可能导致显示上的不一致。
例如，用户选择了Province 1，处理后的selectedValues是['district1', 'district2']。此时，el-cascader组件可能显示选中的标签为District 1和District 2，而不是Province 1。这可能符合用户的需求。
然而，如果用户手动取消District 1，selectedValues变为['district2']，此时组件应该只显示District 2为选中状态。但Province 1的复选框可能仍然显示为部分选中状态，因为它的一个子节点（District 1）被取消选中。但处理后的selectedValues不再包含District 1，所以父节点的状态可能显示为未完全选中。
这可能造成用户的困惑，因为界面上显示的选中状态与处理后的值可能不一致。
因此，这种方法可能导致界面显示与数据不一致，影响用户体验。
综上，可能更可行的方案是：
1. 不允许用户选择非最后一级的节点，通过设置disabled属性。
2. 或者，使用级联选择器的多选模式，但通过某种方式让父节点的选择自动转换为叶子节点的值，并在界面上正确反映。
但根据Element Plus的文档，可能没有直接支持这种需求的属性，因此需要结合事件处理和数据处理来实现。
回到用户的问题，根据引用[3]，某个字段的级联选择器在勾选一级时取一级，勾选一级和二级时取二级，勾选三级时取三级。这可能意味着，用户希望根据所选节点的最深层级来取值。例如，如果用户同时勾选了一级和二级，那么只取二级的值。如果勾选了三级，则取三级的值。这可能与当前需求不同，当前需求是无论勾选哪一级，只取最后一级的数据。
因此，用户的需求是，不管勾选哪一级，只要该节点下存在子节点，就取最深层的子节点。例如，勾选省，取所有区；勾选市，取所有区；勾选区，取区本身。
这需要处理每个勾选的节点，找到其最深层的子节点，然后将这些子节点的值加入结果。
这可能与引用[3]中的逻辑不同，引用[3]中的逻辑是，如果勾选父节点，则取子节点，但如果同时勾选父节点和子节点，则取子节点。而用户的需求是，无论勾选哪一级，都取最后一级的数据。
因此，回到之前的处理方式，在handleChange事件中处理选中的节点，替换为非最后一级节点的叶子节点，可能是唯一的方法，尽管存在界面显示的问题。
因此，最终的解决方案可能如下：
- 配置el-cascader为多选模式，允许用户选择任意层级的节点。
- 在@change事件中处理选中的值，替换所有非最后一级节点的值为其叶子节点的值。
- 更新绑定值，确保只包含最后一级的值。
然后，在界面显示上，可能el-cascader会显示所有被替换的叶子节点的标签，而不是父节点的标签，这可能是可以接受的。
因此，给出代码示例，并说明可能存在界面显示与数据一致性的问题，但功能上满足需求。
最后，还需要验证这种处理方式是否会导致性能问题，特别是在处理大型数据集时。但对于大多数应用场景，这应该是可接受的。</think>在Element Plus的`el-cascader`组件中实现多选级联选择器并确保仅保留最后一级数据的步骤如下：
### 实现步骤
1. **配置组件属性**
设置`el-cascader`为多选模式，并通过`props`配置禁用非最后一级节点的复选框，确保用户只能选择最后一级节点：
```vue
<el-cascader
v-model="selectedValues"
:options="processedOptions"
:props="cascaderProps"
multiple
/>
```
```javascript
data() {
return {
selectedValues: [],
originalOptions: [/* 原始树形数据 */],
cascaderProps: {
multiple: true,
emitPath: false, // 只返回最后一级值
checkStrictly: true, // 允许独立选择节点
// 禁用非叶子节点的复选框
disabled: (node) => node.children && node.children.length > 0
}
};
},
computed: {
// 预处理数据：禁用非叶子节点
processedOptions() {
return this.disableNonLeafNodes(this.originalOptions);
}
},
methods: {
disableNonLeafNodes(nodes) {
return nodes.map(node => {
const hasChildren = node.children && node.children.length > 0;
return {
...node,
disabled: hasChildren, // 非叶子节点禁用
children: hasChildren ? this.disableNonLeafNodes(node.children) : null
};
});
}
}
```
2. **处理用户选择**
如果仍需允许用户选择父节点但自动取其最后一级子节点，可通过`@change`事件处理：
```vue
<el-cascader
v-model="selectedValues"
:options="options"
:props="{ multiple: true, emitPath: false }"
@change="handleChange"
/>
```
```javascript
methods: {
handleChange(values) {
const leafValues = [];
values.forEach(value => {
const node = this.findNodeByValue(this.options, value);
if (node) {
const leaves = this.collectLeafNodes(node);
leaves.forEach(leaf => leafValues.push(leaf.value));
}
});
this.selectedValues = [...new Set(leafValues)]; // 去重
},
// 根据value查找节点
findNodeByValue(nodes, targetValue) {
for (const node of nodes) {
if (node.value === targetValue) return node;
if (node.children) {
const found = this.findNodeByValue(node.children, targetValue);
if (found) return found;
}
}
return null;
},
// 收集所有叶子节点
collectLeafNodes(node) {
if (!node.children || node.children.length === 0) return [node];
return node.children.flatMap(child => this.collectLeafNodes(child));
}
}
```
### 示例说明
- **禁用非叶子节点**：通过预处理数据，将非最后一级节点设为禁用状态，用户只能直接勾选最后一级[^3]。
- **动态替换父节点值**：若允许勾选父节点，则在`@change`事件中将父节点替换为其所有最后一级子节点，确保结果仅包含叶子节点值[^3]。
### 注意事项
- **显示一致性**：若允许选择父节点，组件可能显示父节点标签，但实际存储值为其子节点，需在前端展示时额外处理。
- **性能优化**：对深层级或大数据量场景，递归遍历需谨慎，可结合缓存或扁平化数据结构优化。
扫一扫
4673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
