el-cascader lazyLoad没有下级数据不转圈
时间: 2023-11-10 15:57:40 浏览: 103
vue-lazyload-一个Vue.js插件,用于在应用程序中延迟加载图像或组件。-Vue.js开发
您好!对于 element-ui 的 el-cascader 组件,如果没有下级数据时不想显示转圈效果,您可以通过自定义加载过程来实现。具体的解决方案如下:
1. 首先,在组件中定义一个变量 `loading`,用于控制加载过程的显示与隐藏。
```javascript
data() {
return {
loading: false,
// 其他数据...
}
},
```
2. 在请求下级数据之前,将 `loading` 设置为 `true`,表示正在加载中。
```javascript
methods: {
loadData(selectedOptions) {
const targetOption = selectedOptions[selectedOptions.length - 1];
targetOption.loading = true;
// 发起请求获取数据
// ...
// 请求成功后隐藏加载过程
targetOption.loading = false;
},
},
```
3. 在模板中使用 `loading` 变量来控制加载过程的显示与隐藏。
```html
<el-cascader
:options="options"
:load-data="loadData"
>
<template v-slot="{ node }">
<span>{{ node.label }}</span>
<span v-show="loading && node.loading">加载中...</span>
</template>
</el-cascader>
```
通过以上步骤,当没有下级数据时,转圈效果将不会显示。
希望对您有所帮助!如果还有其他问题,请随时提问。
阅读全文