element-ui中empty-text的用法

element-ui中empty-text的用法

在使用element-ui组件的过程中，当表格的绑定数据为空时常需要显示暂无数据等字样，这时候就用到了empty-text
用法有两种

第一种

直接写在el-table上

  <el-table
    :data="tableData"
    border
    empty-text='暂无数据'
    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>

这种方式当数据中列过多导致出现横向滚动条时，居中的字体会被遮盖，无法设置样式

第二种

写成和el-table-column并级用slot="empty"来实现，这种写法可以设置样式，位置

<div slot="empty" style="text-align: left;">暂无数据</div>