Vue中的＜el-table＞中的行内空数据显示自定内容出错

已于 2022-11-26 13:48:09 修改
阅读量735 收藏
点赞数
文章标签： vue.js
于 2022-11-26 13:46:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46000200/article/details/128051043
版权

救救孩子吧，公司的一个前端Bug，在表格内判断设备的imei号是否为空，如果imei为空则显示无关联设备，并且操作按钮不显示，但是我加入判断之后就会剔除这条imei为空的数据，导致分页都出问题

这是不加判断的代码和展示图，这是不加渲染的图片

这是加了:formatter渲染之后的代码和样式，直接剔除了imei为空的数据

而且使用上述的两种渲染方式之后都会丢失imei为空的一行数据，使用

 这样在<el-table-column></el-table-column>内部进行判断也会丢失数据,但是公司的要求是不管imei是否为空都需要展示

这上面的两种办法都会丢失数据，所以我想着使用class渲染一下表格，但是不仅imei行渲染上了，在按钮前面也加上了这样的字样

这下面是使用class判断渲染的样式和代码

用这种方法之后按钮上也出现了无关联设备的字样 救救孩子吧

qq_46000200
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue使用饿了么el-table标签方法及报错解决
程序媛乐园
12-13 2854
学习Vue 最近在学习vue，使用到了饿了么标签中的表格。 使用方式 一般情况下，再vue中键入如下图所示代码使用即可。 代码链接：https://element.eleme.cn/#/zh-CN/component/table 结果 但是页面只有一个官方图标，其他什么也不显示，更没有想要的表格： 解决过程 检查元素，点开控制台，发现页面报错。 [Vue warn]: Unknown cu...
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
12-13
由于项目要求，需要在 Table 组件的行内点右键的时候弹出菜单。在线演示地址及最终效果图如下： 在线演示地址>>   首先新建一个Table组件的实例： <a> { return record.INDEX;}" :dataSource="tableData" /> ... ...
el-table 中 el-table-column 使用slot插槽 v-if导致不显示问题
ahead_he的博客
08-19 4002
今天碰到了el-table 中 el-table-column 使用slot插槽 v-if导致不显示，经过研究是细节上的问题所导致。
vue中，el-table无数据（空数据）时，进行暂无数据的文本内容设置之具名插槽#empty（v-slot=empty）和empty-text
最新发布
weixin_44867717的博客
05-15 1364
在表格空数据时显示的文本内容，也可以通过。设置，来展示【暂无数据】
ElementUI 表格中某项为空值时用暂无数据代替显示
热门推荐
yangwq的博客
03-09 1万+
<el-table :data="tableData" border style="width: 100%" ref="multipleTable"> <el-table-column type="index" label="序号" width="50" :index="indexMethod" align="center"></el-table-colum...
解决el-table排序时当某列数据有空值导致排序错乱的问题
a576837179的博客
12-24 2538
当表格列排序不是连续有值时会导致组件自带排序功能错误，按照如下思路即可解决。 解决前： <el-table> <el-table-columm prop="newCommitTime" label="最新时间" sortable width="144px" align="center"></el-table-columm> <el-table-columm prop="consumerCommitTime" label="消费时间" sortable widt
Vue-cli脚手架使用element-ui 表格搜索功能时遇到空表格filter报错问题
Yuworm的博客
04-02 182
Vue-cli脚手架使用element-ui 表格搜索功能时遇到空表格filter报错问题
vue el-table实现行内编辑功能
10-15
在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将详细讲解如何在Vue项目中利用Element UI的`el-table`实现行内编辑功能。 首先，我们需要在`el-table`的表头...
vue+Element中table表格实现可编辑（select下拉框）
11-20
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的...
vue+element的表格中添加加减按钮的问题
09-05
<el-button size="mini" @click="decrease(scope.$index)">-</el-button> </template> </el-table-column> </el-table> </template> ``` 这里，我们定义了两列，一列显示ID，另一列包含加减按钮。`scope.$index...
Vue3 + element-plus table表格为空时
小草莓的博客
06-03 3624
Vue3 + element-plus table表格为空时
vue 过滤数组数据，用于控制 el-table 某一行是否显示
宁不知的博客
11-01 5661
vue 过滤数组数据，用于控制 el-table 某一行是否显示 场景：第一次查出来的数据用list接收。然后我第二次要用到list里面的数据，但是我想过滤掉选中的某一条用户的信息，这个时候就使用 filter 函数对list 进行 过滤。很简单，做个笔记。 <el-dialog title="克隆规则" :visible.sync="cloneDialogVisible" width="6...
el-table实现表格数据为空时自定义内容
此人很懒，什么都没有写
03-10 1万+
使用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'}"> <.
table 表格数据为空的时候展示--
weixin_43950954的博客
11-27 754
1，el-table-column 里面直接三元运算符 a?
el-table表格中当某单元格字段为空时统一设置其显示内容
weixin_52137696的博客
09-29 2720
el-table表格中当某单元格字段为空时统一设置其占位符
elementui或element-plus问题汇总 包含el-table单列部分无数据时统一显示特定内容等
qq_40906355的博客
11-14 386
本文主要：element或element-plus常见问题自我总结。
el-table表格中数据为空时，表格项显示 ——
weixin_56733569的博客
03-20 3730
当el-table表格项为空的时候，显示"——"符号
Element Plus el-table 查询中、数据为空自定义‘暂无数据’修改
古之成大事者，不惟有超世之才，亦必有坚韧不拔之志
10-13 2289
-查询中： 重写覆盖查询文案: 需要为空也要重写，不写即使用默认文案‘暂无数据’ -->description="暂无数据"-- 查询结束 -->一、Element Plus。同理 插槽使用不一样。
vue el-table 行内el-input校验
03-27
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以将页面拆分成独立的、可复用的组件。el-table是Vue中的一个表格组件，而el-input是一个输入框组件。 在el-table中使用el-input进行行内校验的方法如下： 1. 首先，在el-table的每一行中使用el-input组件来渲染需要进行校验的单元格。 2. 在el-input上使用Vue的校验指令（如v-model和:rules）来实现校验功能。 3. 在Vue实例中定义校验规则，并将其应用到el-input上。 下面是一个示例代码： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"> <template slot-scope="scope"> <el-input v-model="scope.row.name" :rules="nameRules"></el-input> </template> </el-table-column> <el-table-column prop="age" label="年龄"> <template slot-scope="scope"> <el-input v-model="scope.row.age" :rules="ageRules"></el-input> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 }, // ... ], nameRules: [ { required: true, message: '姓名不能为空', trigger: 'blur' }, // 其他校验规则 ], ageRules: [ { required: true, message: '年龄不能为空', trigger: 'blur' }, // 其他校验规则 ] }; } }; </script> ``` 在上述代码中，我们使用了el-table组件来展示数据，并在每一列中使用el-input组件进行编辑。通过给el-input组件绑定v-model指令，可以实现数据的双向绑定。同时，通过给el-input组件绑定:rules指令，可以定义校验规则。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值