el-cascader设置只能选到最后一级
时间: 2023-11-07 15:15:14 浏览: 116
您可以使用el-cascader组件的`show-all-levels`属性来实现只能选择到最后一级的功能。将`show-all-levels`属性设置为`false`,这样用户只能选择最后一级,而不能展开所有级别。以下是一个示例代码:
```html
<template>
<div>
<el-cascader
:options="options"
:show-all-levels="false"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{
value: '1',
label: '一级',
children: [
{
value: '1-1',
label: '二级1',
children: [
{
value: '1-1-1',
label: '三级1'
},
{
value: '1-1-2',
label: '三级2'
}
]
},
{
value: '1-2',
label: '二级2',
children: [
{
value: '1-2-1',
label: '三级3'
},
{
value: '1-2-2',
label: '三级4'
}
]
}
]
}
]
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>
```
在上面的示例中,`show-all-levels`属性被设置为`false`,这样用户只能选择到最后一级,不能展开所有级别。当选择发生变化时,可以通过`@change`事件来处理所选的值。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)