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

修改方式与 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'

....

你可能感兴趣的:(vxe-table,javascript,html,前端,vxe-table,loading)