elemen-ui官方使用
<el-tablev-loading="loading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)":data="tableData"style="width: 100%">
loading加载事件属性解释
element-loading-text
在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方
element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。
作为小白，这次主要记录的问题是，自定义element-ui loading 加载动画
网络查找，思路基本就是这么个思路
直接在全局样式文件中修改: 或者在 app.vue 文件中设置也可以
//index.scss我这里是 index.scss 文件//自定义 加载动画.el-loading-spinner {background-image:url('../assets/loading_images/loading.gif'); // 这个是自己想设置的 gif 加载动图background-repeat: no-repeat; //设置背景 图 不重复height:100%;background-position:center; //设置背景 定位 为居中top:0; //覆盖 element-ui 默认的 50% 因为此处设置了height:100%,所以不设置的话，会只显示一半，因为被top顶下去了}.el-loading-spinner .circular {display: none; //隐藏 之前 element-ui 默认的 loading 动画}
以及在项目中的使用
项目中封装了一个 TableBox 组件，其中控制加载动画的就是 ：loading="tableLoading"
<table-box:headInfo="tableDataTitle":data="tableData":pagination="pagination":pageSizes="pageSizes":loading="tableLoading"@evTurnPage="pageChange"@evClickButton="tableBtnClick"@evSelectionChange="handleSelectionChange">
js 里设置动画的初始值
data() {return {tableLoading: false}}
我们一般需要的功能都是在数据还没加载出来的时候，显示加载动画，也就是：tableLoading 设置为 true，待数据加载完成之后在设置 tableLoading 为 false
// 加载数据loadData() {this.tableLoading = true;// 这里面是调用api获取数据展示this.tableData = [];const params = {page: this.pagination.page,page_size: this.pagination.limit,field: this.queryParam.type,value: this.queryParam.key,map: "map_drug"};APIDict.getListData(params).then((res) => {try {res.data.data.forEach((item) => {this.tableData.push({id: item.id,drug_type1: item.drug_type1,drug_type2: item.drug_type2,drug_type3: item.drug_type3,drug_type4: item.drug_type4,drug_name: item.drug_name,dose_type: item.dose_type,isEdit: this.isEdit});});this.pagination.total = res.data.total;this.tableLoading = false;} catch (e) {this.$message({message: e.message,type: "error"});}}).finally(() => {});},
