在Element Plus中,表格(el-table)组件loading,自定义图标element-loading-spinner怎么设置
时间: 2024-02-24 19:53:09 浏览: 352
在element-ui的select下拉框加上滚动加载
5星 · 资源好评率100%
要在 Element Plus 中的表格(el-table)组件中使用自定义的 loading 图标,可以使用 `loading` 属性以及 `element-loading-spinner` 组件。
首先,在你的代码中引入 `element-loading-spinner` 组件,例如:
```vue
<template>
<div>
<el-table
:data="tableData"
:loading="loading">
<el-table-column
prop="name"
label="Name">
</el-table-column>
<el-table-column
prop="age"
label="Age">
</el-table-column>
</el-table>
<element-loading-spinner />
</div>
</template>
<script>
import ElementLoadingSpinner from 'element-loading-spinner'
export default {
components: {
ElementLoadingSpinner
},
data() {
return {
tableData: [
{ name: 'John', age: 22 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 45 }
],
loading: true
}
}
}
</script>
```
在上面的代码中,我们引入了 `element-loading-spinner` 组件,并在表格中使用 `loading` 属性来控制 loading 状态。当 `loading` 为 `true` 时,表格会显示 loading 状态,并且显示自定义的 loading 图标 `element-loading-spinner`。
你可以根据需要设置自定义的 loading 图标的样式和属性,例如大小、颜色等等。
阅读全文