项目中用到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