解决vue2中el-table表格组件的空状态过小的问题

问题

当我们使用element的表格组件的时候，空状态会变的非常瘪，就会造成页面非常难看

这样很不美观

解决办法

可以使用插槽设置空状态，并通过css来调整空状态的样式

新建一个空表格

<template>
    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
        </el-table>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: []
      }
    }
  }
</script>

通过插槽添加空状态和样式

<template>
    <div>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="日期" width="180"> </el-table-column>
            <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <template slot="empty">
                <div class="no-data">
                    <span>暂无数据</span>
                </div>
            </template>
        </el-table>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: []
      }
    }
  }
</script>
<style lang="less" scoped>
.no-data {
    display: flex;
    min-height: 280px;
    flex-direction: column;
    justify-content: center;
}
</style>

具体效果