Vue3 ElementPlus el-cascader 增加 loding
时间: 2024-10-14 09:18:46 浏览: 67
Vue3 中的 Element Plus 组件 `el-cascader` 提供了一个下拉选择器,它默认在加载数据时会有一定的交互反馈。如果你想增加一个 loading 状态,可以在需要的地方添加一些额外的处理。以下是一种常见的做法:
1. 首先,在组件模板里,你可以通过 `v-loading` 指令来控制 Cascader 的加载状态。例如:
```html
<template>
<el-cascader
:options="options"
v-model="selectedValues"
@load="loadData"
v-loading="isLoading"
></el-cascader>
</template>
<script setup>
import { ref } from 'vue';
import { useLoading } from 'element-plus';
const isLoading = ref(false);
const options = ...; // 你的选项数据
const selectedValues = ref([]);
const {_loading} = useLoading({ duration: 750 }); // 使用 Element Plus 的 loading 组件
async function loadData() {
isLoading.value = true;
try {
const loadedOptions = await yourApiCall(); // 替换成你的异步数据获取函数
isLoading.value = false;
options.value = loadedOptions;
} catch (error) {
console.error('Error fetching data:', error);
isLoading.value = false;
}
}
</script>
```
在这个例子中,当 `loadData` 被触发(通常是用户开始滚动或者选择某个层级),`isLoading` 会被设置为 `true`,显示加载动画;数据加载完成后或出错,再将其恢复到 `false`。
阅读全文
相关推荐

















