在el-table 中实现空状态显示,可以通过以下几种方法: 使用empty-text 属性:Element UI 提供了 empty-text 属性,用于自定义空状态下的显示文本。 使用插槽(slot):特别是 empty 插槽,允许开发者自定义空状态下的显示内容,可以是文本、图片或其他 HTML 元素。3...
解决办法 可以使用插槽设置空状态,并通过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 :data="data" :height="height" :stripe="stripe" :row-key="rowKey" :tree-props="{children: 'child', hasChildren: 'hasChildren'}" @selection-change="handleSelectionChange"> <!--自定义空行--> <empty-view slot="empty-text" text="暂无数据" /> <!--判断是否开启多选--> <el...
el-table-empty功能强化 <template v-slot:empty> <div style="width:64px;height:80px;"> <svg-icon icon-class="empty" class-name="svg-center size64" /> </div> <div style="line-height:16px;margin:10px 0;">暂无数据</div> </template>...
<el-table><el-table-column prop="subjectorderinfoNum" label="操作"><template slot-scope="scope"><el-button type="warning" @click="handleRemoveToSC(scope)">移除</el-button></template></el-table-column><!-- ele 暂无数据插槽 --><template slot="empty"><div class="noData"></div></...
插槽 名称数据描述 header {data} 可选的表格顶部插槽 default {toggle, select, deselect} ElTable 的列集合,用法与 ElTable 的默认插槽相同 empty - ElTable 的empty 插槽 append - ElTable 的append 插槽 pagerPrepend {data} 分页插槽,默认放在分页左侧 pagerAppend {data} 分页插槽,默认放在分页右侧 pagerSu...
<template> <div :class="['md-table', noPadding ? 'no-padding' : '']" :style="tableStyle" ref=&quo
default{toggle, select, deselect}ElTable的列集合,用法与ElTable的默认插槽相同 empty-ElTable的empty插槽 append-ElTable的append插槽 pagerPrepend{data}分页插槽,默认放在分页左侧 pagerAppend{data}分页插槽,默认放在分页右侧 pagerSummary{data}自定义的分页信息统计 ...
tableHeader 自定义表格头部左侧区域的插槽,一般情况该区域放操作按钮 toolButton 自定义表格头部左右侧侧功能区域的插槽 append 插入至表格最后一行之后的内容, 如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。 若表格有合计行,该 slot 会位于合计行之上。 empty 当表格数据为空时自定义的内容 paginatio...
</el-table> <el-empty v-else></el-empty> ``` 在上面的示例中,当 tableData 数组中的数据为空时,el-table 组件将不会显示,而是通过 v-else 指令显示 el-empty 组件,从而达到显示自定义空数据提示信息的效果。 三、自定义的空数据提示组件 在el-table empty 中,可以自定义空数据提示组件的样式和内容...