el-table实现表格数据为空时自定义内容

使用element ui的el-table组件，当表格数据为空时自定义提示文字和添加按钮等内容

页面效果

自定义文字+按钮

官方文档

空数据时显示的文本内容，也可以通过slot="empty"设置

效果实现

使用vue组件template和slot插槽

<el-table :data="form.authorizedList" border :header-cell-style="{background:'rgb(249 250 252)', color: '#909399'}">
    <template slot="empty">
        <p class="emptyText">{{ tableEmptyText }}</p>
        <el-button type="primary" @click="handleAdd" style="margin-bottom: 35px">添加用户</el-button>
    </template>
    <el-table-column type="index" label="序号" align="center" width="70" />
    <el-table-column label="坐席名称" align="center" prop="seat" />
    <el-table-column label="工号" align="center" prop="jobNum" />
    <el-table-column label="登录名" align="center" prop="loginName" />
    <el-table-column label="备注" align="center" prop="remark" />
    <el-table-column label="操作" align="center">
        <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.$index)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

Tips

• header-cell-style控制表头样式
• tableEmptyText使用值绑定控制显示内容
• el-button上的样式调整按钮的位置