React里eltable自己变小的bug排查全过程
大家看 这神奇的BUG
现在里边这个表格是撑满这个弹框的
然后把弹框重新打开
大家看里边表格就变窄了
我们先来检查一下这个元素
现在这个表格的宽度大家看是
然后呢我们刷新一下
大概正常的情况下呢这个表格是
然后我们把它关闭
再重新打开
大概变成450了
怎么回事呢
我们先来看一下代码
他这个用的是react的
说实话react 我也不是很熟
没关系大家跟着我看就可以哈
我们先去看一下这个table的源码
这个react直接点不进去
所以呢我们需要自己去这个node_modules
里面去找到这个组件
在这里然后呢找到他这个table body
他看这块就有一个width等于this.bodyWidth
比如说他肯定是每一次展开的时候
这个值发生变化了
我们先来看一下这个值在哪设置的哈
哎在这里大家看
bodyWidth是从layout里面
取出来的
然后下面这点运算影响不大
那我们来看layout啊
layout他在这同级目录下有一个 table layout
然后呢这里边我们在搜bodyWidth
打开这个赋值 赋了一个
this.table的一个宽度
我们不管他再往下找
在这里
打开 body width
等于这两个值里边那个大的
body width
就是上面我们看到它取的就是这个el-table
table 的
这个整体的宽度
然后呢它还有一个变量body min width
它是怎么取的呢
大家看他在这啊
就是取他每一列的设置的这个width
或者每一列你给设置那个minWidth(之和)
啥意思呢
就是在这个表格里边大家看
他给每一列都设置