使用vue就避免不了用element-ui使用table总是遇到设计小姐姐搞出来的不一样的空提示效果 代码只要在el-table里面增加如下代码就可以了 代码语言:javascript 复制 <template slot="empty"><divclass="table_empty"><divclass="empty_tips">暂无未推修任务,<el-button @click="newFixTask"type="text"size="small...
1 只需要更改文字提示 如果只要更改文字提示,直接添加empty-text属性即可。如下图所示: <el-table :data="tableData" size="mini" tooltip-effect="light" row-key="id" border lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" empty-text="暂无我的待办"> 1. 2...
你误解了empty-text的作用,empty-text是表格源数据为空时显示的内容是这种效果。至于想实现你的需求也有很多种方式,比如这样 <el-table-column> <template slot-scope="{row}"> {{ row.name || '暂无' }} </template> </el-table-column>有用3 回复 面对疾风吧: 谢谢,是我理解错了 回复2018-07-17 ...
看源码可以发现你理解错了。是data为空时,显示empty-text。ElementUI table源码 <div v-if="!data || data.length === 0" class="el-table__empty-block" ref="emptyBlock" :style="{ width: bodyWidth }"> <span class="el-table__empty-text"> <slot name="empty">{{ emptyText || t('el....
.el-table .el-table__body td .cell > span:empty::after, .el-table .el-table__body td .cell .approval:empty::after, .el-table .el-table__body td .cell div:empty::after, .el-table .el-table__body td .cell .line-limit-length:empty::after{content:'--';} ...
></el-table-column><el-table-columnprop="statustext"label="状态"></el-table-column><divslot="empty"><div><imgsrc="../../assets/pcpay/no_record_pic.png"alt=""width="140"height="140"/></div><p:style="{'marginTop': '23px'}">未查询到您的交易记录</p></div></el-table>...
ElTable实现空单元格自动填充占位符_CSU_Zipple的博客-CSDN博客 我的情况:通过js实现空单元格自动填充空占位符'—'。但发现编辑后,单元格值改变,却仍有之前的占位符 js: export const fillEmptyColumn = (table) =>{if(!table || !table.classList.contains('table')) {return; ...
</el-table> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 效果 2.添加图片修改文字等 <el-table :data="dataList" size="medium" border @selection-change="selectionChangeHandle" v-loading="loading" class="table" > <templateslot="empty"> ...
name="empty"> <my-empty></my-empty> </slot> </template> <!-- 展开 --> <el-table-column v-if="config.expand" type="expand"> <template slot-scope="scope"> <slot name="expand" :row="scope.row"></slot> </template> </el-table-column> <!-- 多选 --> <el-table-column :...
这一部分比较简单,el-table组件通过data属性设置表格数据,通过el-table-column组件设置表格列。表格数据tableData通过接口请求到,表格列数据tableColumns,由于只有三列比较简单,由我自己编写。 效果如下: 2.实现排序功能 (1) 阅读文档 从文档中的这段介绍可以提炼出如下的几点信息: el-table-column的sortable属性可以实...