vxe-table 表格自定义 Loading 动态图

最新推荐文章于 2024-06-11 11:50:40 发布

Greenhand_BN

最新推荐文章于 2024-06-11 11:50:40 发布

阅读量2.6k

点赞数 1

分类专栏： vxe-table 文章标签： javascript html 前端 vxe-table loading

本文链接：https://blog.csdn.net/Greenhand_BN/article/details/121406049

版权

vxe-table 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

修改方式与 Element UI 大同小异，参看：ElementUI 自定义Loading动态图

创建样式文件（创建css文件 or scss文件看你心情！）
在这里插入图片描述

路径：assets/styles/VXETable_loading.scss

css 样式文件

/*vxe-table loading 自定义*/
.vxe-loading{
  background-color:rgba(255, 255, 255, 0.6)
}
.vxe-loading .vxe-loading--spinner{
  height:180px !important;
  width:100% !important;
  top: 35%;

  background-image:url('../image/loading2.gif');
  background-repeat: no-repeat;
  background-size: contain;
  background-position:center;
}


.vxe-loading .vxe-loading--spinner:before,.vxe-loading .vxe-loading--spinner:after{
  display: none;
}

main.js 中引入

...

// 基于 vxe-table 表格的适配插件，用于兼容 element-ui 组件库
import VXETable from 'vxe-table'
import VXETablePluginElement from 'vxe-table-plugin-element'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
import 'vxe-table-plugin-element/dist/style.css'

VXETable.use(VXETablePluginElement)
VXETable.use(VXETablePluginExportXLSX)

//自定义的VXETable loading样式
import '@/assets/styles/VXETable_loading.scss'

....