VUE-ElementUI⾃定义Loading图操作需求：
element ui loading图只能使⽤⾃⼰的loading图，
但很多场景下，需要替换成⾃⼰的gif图
虽然⽂档中有些， element-loading-spinner="el-icon-loading" 可指定⾃定义图
但经测试，也只是只能再elementui 图标库中的图，不是我们想的那个⾃定义图类的意思。
⾃定义图⽅法：
1）添加⾃定义elementUI loading样式
狗乳腺肿瘤
asrts下新建CSS⽂件夹及CSS⽂件⽐如myCss.css
再⾥⾯，写⼊⾃定义的element类CSS样式
.el-loading-spinner{
/*这个是⾃⼰想设置的 gif 加载动图*/
background-image:url('../img/loading.gif');
background-repeat: no-repeat;
background-size: 200px 120px;
height:100px;
width:100%;
background-position:center;
/*覆盖 element-ui 默认的 50% 因为此处设置了height:100%，所以不设置的话，会只显⽰⼀半，因为被top顶下去了*/
top:40%;
}
.el-loading-spinner .circular {
/*隐藏之前 element-ui 默认的 loading 动画*/
display: none;
}
.el-loading-spinner .el-loading-text{
/*为了使得⽂字在loading图下⾯*/
margin:85px 0px;
}
CSS 细调，需要在浏览器调试⼯具中细调
2）main.js 导⼊⾃定义样式
这⾥注意，要在导⼊elementUI之后，再导⼊⾃⼰的样式，要不然会被elementUI覆盖
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.u(ElementUI); //element
//⾃定义的element UI loading样式
import './asts/css/myCss.css'
3) v-loading
<el-container
v-loading="loading"
element-loading-background="rgba(255, 255,255, 0.5)"
element-loading-text="加载中..."
>
注意，这⾥不要加上element-loading-spinner="el-icon-loading" ，否则也会同时出现element图库中对应的loading图4）对应加载逻辑
data () {
return {
loading: true
}
},
startLoading()
{
this.loading=true;
},
endLoading(){
this.loading=fal;
},侧目而视造句
axios请求接⼝时，开始loading，收到数据后，loading结束
Ajx_GetClassList()
{
this.startLoading();
this.$axios(
{
url: url,
method:'POST',
}
)
.then(res=>{
})
},
5) 运⾏时，是正常显⽰，但编译后，看不到⾃定义的图⽚资源了原因，VUE项⽬打包后，样式⽬录结构变为static/css
解决
build->utils.js 配置⽂件添加
publicPath: '../../'
// Extract CSS when that option is specified
// (which is the ca during production build)
if (act) {
act({
u: loaders,夜钓
publicPath:'../../', // 解决element-ui中组件图标不显⽰问题
fallback: 'vue-style-loader'
})
这样，编译后的element-ui资源也可以正常访问了
⾃定义loading图效果
补充知识：vue+elementUI⾃定义通⽤table组件
⾃定义通⽤table组件，带分页，后端排序，路由带参数跳转，多选框，字段格式化
1.tableList组件
<!-- 费⽤报销编辑弹框 -->
<template>
<div class="table-temp">
<el-table
:data="tableData"
border
size="mini"
fit
highlight-current-row
height="500"
v-loading="loading"
@lection-change="handleSelectionChange"
@sort-change="sortChange"
>
<el-table-column type="lection" width="55" align="center"></el-table-column>
<el-table-column type="index" label="序号" align="center" fixed></el-table-column>
<!-- prop: 字段名name, label: 展⽰的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最⼩宽度(不传默认值), active: 是否有操作列 active.name: 操作列字段名称, active.clickFun: 操作列点击事件, formatData: 格式化内容-->
<el-table-column
v-for="(item, key) in tableHeader"
:key="key"
:prop="item.prop"
:label="item.label"
:fixed="item.fixed"
:min-widitem="item.minWidth"
align="center"
:sortable="item.sortable"
>
<template slot-scope="scope">
<div v-if="item.active">
<el-button
v-for="(o, key) in item.active"
:key="key"
@click="w, o.router, o.routerId)"
type="text"
size="small"
>{{o.name}}</el-button>
</div>
<div v-el>
胆囊炎中医治疗<a class="btn-a"
v-if="uter"
@click="uter, uterId)"
>
<span v-if="!item.formatData">{{ w[item.prop] }}</span>
<span v-el>{{ w[item.prop] | formatters(item.formatData) }}</span>
</a>
<div v-el>
<span v-if="!item.formatData">{{ w[item.prop] }}</span>
<span v-el>{{ w[item.prop] | formatters(item.formatData) }}</span> </div>
</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
background
layout="total, prev, pager, next"
:current-page="pagination.pageIndex"
:page-size="pagination.pageSize"
:total="pagination.pageTotal"
@current-change="handlePageChange"
></el-pagination>新里番
</div>
</div>
</template>
<script>
var _ = require('lodash');
export default {
props: {
tableData: {
不要脸的句子
type: Array,
default: function() {
return [];
}
},
tableHeader: {
type: Array,
default: function() {
return [];
}
},
loading: {
type: Boolean,
default: fal
乌姜
},
pagination: {
type: Object,
default: {
pageIndex: 0,
pageSize: 15,
pageTotal: 0
}
}
},
data() {
return {
multipleSelection: [],
newPagination: {
pageIndex: 0,
pageSize: 15,
pageTotal: 0
}
};
},小学生游戏
methods: {
// 多选操作
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('lectFun', { backData: this.multipleSelection });
},
// 分页导航
handlePageChange(val) {
console.log('handlePageChange:', val);
this.$t(this.pagination, 'pageIndex', val);
//调⽤⽗组件⽅法
this.$emit('pageChange', { backData: this.pagination});
},
/
/ row：本⾏数据，route：要跳转的路由路径，跳转要传的参数routeId
handleActive(row, route, routeId) {
console.log(row);
this.$router.push({
path: '/' + route,
query: {
id: row[routeId]
