Element UI el-table数据不生效问题

问题场景:

后端(springboot)通过接口传输对象给前端,前端用el-table表格展示但没有生效,表格里没有数据

在同一个组件里的另一个表格生效了,但这个表格没生效,只有两个表格的data属性不一样,是用不同的接口接收到的数据

为什么data属性不一致呢?

在我的设想中,生效的表格展现的是所有数据,所以接收的数据是一个很多条数据的数组,没生效的表格只展现一条数据,所以接收的数据是一个只有一条数据的数组

想起之前也好几次遇见这样的问题,每次解决了但是都没有记录,导致重复遇到这种bug

debug:

既然两个表格的data属性不一样,可能就是data属性的原因,那就可以从这个角度排查:

先把两个数据都console.log一遍,顺便把他们的数据类型也console.log一遍,都是Object类型,但一个是数组,另一个是对象,似乎没毛病,都是数组对象。

再细看对象内容,一个有很多条数据,一个只有一条数据,似乎也没毛病,但是细看之下,生效的那个对象数组里面有很多括号,但是另一个对象数组里面一个括号都没有,有点不对劲

猜测:可能是这个没生效的“对象数组”真的只是个对象,而不是数组

尝试把这个对象转换成数组

obj = new Array(obj)

然后console.log一下,有括号了,然后放进表格里,生效了

其实这个问题是个小问题,但真的很容易被忽略,如果不加以记录的话,确实很容易踩坑

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI 中,`el-table` 的列宽可以通过设置 `min-width`、`width`、`max-width` 属性来控制。如果你设置了这些属性但列宽不生效,可能是因为你有为 `el-table` 组件设置 `width` 属性,或者你设置的 `width` 不够大,导致列无法按照你设置的宽度进行渲染。 另外,`el-table` 中的列宽还受到表格宽度、列数、列的默认宽度等因素的影响,因此你需要根据实际情况进行调整。以下是一些常见的解决方法: 1. 为 `el-table` 组件设置一个足够大的 `width` 属性,例如 `width: 100%`。 2. 如果你只需要固定几列的宽度,可以使用 `fixed` 属性,并为这些列设置固定宽度,例如: ``` <el-table :data="tableData" style="width: 100%" :fixed="true"> <el-table-column prop="name" label="姓名" width="150"></el-table-column> <el-table-column prop="age" label="年龄" width="150"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 注意,使用 `fixed` 属性时,`el-table` 组件的 `width` 属性必须设置为一个固定值,否则列宽可能无法生效。 3. 如果你需要调整所有列的宽度,可以考虑使用 `resizable` 属性,允许用户自由拖拽列宽。例如: ``` <el-table :data="tableData" style="width: 100%" :resizable="true"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 使用 `resizable` 属性时,不需要为列设置固定宽度,因为用户可以自由调整列宽。 希望这些方法能够帮助你解决问题。如果仍然无法解决,请提供更多的代码和问题描述,我们会尽力帮助你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值