项目中用到table表格,动态请求数据时页面会先显示暂无数据,再显示loading,最后再正常显示数据,虽然没啥错但是用户体验不好。
解决办法:通过empty-text属性自定义要显示的内容,初始化时值置为空,
请求回来数据,但是长度为空时赋值“暂无数据”
<el-table
v-loading="loading"
element-loading-text="小易拼命加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="tableData"
stripe
border
>
<template slot="empty">
<p>{{tableEmptyText}}</p>
</template>
<el-table-column
show-overflow-tooltip
sortable
v-for="(item,index) in headTitArr"
:key="index"
:prop="item.fieldKey"
min-width="150"
:label="item.fieldName">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
style="border-lrft:none;"
width="140">
<template slot-scope="scope">
<el-button @click="editMenuItem(scope.row,scope.$index)"></el-button>
<el-button @click="delMenuItem(scope.row,scope.$index)"></el-button>
</template>
</el-table-column>
</el-table>
// 还加了loading的效果,在table组件上添加v-loading="loading"
// datad定义
tableEmptyText:'',
loading:true,
// 请求成功后重置值为“暂无数据”
this.tableEmptyText = '暂无数据'
this.loading = 'false'
表头是动态请求回来的,有多少列并不确定,操作列要固定在右侧,内容过多会横向滚动,列的宽度不能固定死,否则会出现列数过少,不能占满剩余宽度时,会有多余的空白列,我在网上搜索了一下,有根据内容来设置宽度的,看着操作有点多,我就偷了个懒,给el-table-column设置了min-width,保证min-width大于内容最多的那一列的宽度即可,这样列数少时,每一列的宽度会被自动撑开,列数多了按照最小宽度设置,且会出现横向滚动条,完全满足我的需求
参考链接:https://blog.csdn.net/a1059526327/article/details/110374558