Element: [Bug Report] The fixed attribute in <el-table-column> will causes <el-table-body> to be rendered twice

Created on 31 Jul 2018 · 7Comments · Source: ElemeFE/element

Element UI version

2.4.5

OS/Browsers version

win10 / chrome 68

Vue version

2.5.16

Reproduction Link

https://jsfiddle.net/SHERlocked93/mmx38qxw/4395/

Steps to reproduce

点击右边的展开按钮

Click the expand button on the right

What is Expected?

只渲染组件 <el-table-body> 一次，<this-expand>组件中的mounted方法只打印一次

Render the component <el-table-body> only once, and the mounted method in the component only prints once.

What is actually happening?

<el-table>下面的<el-table-body>会渲染两个，在开发模式下，打开vue-devtools发现<ElTable>下面有两个<ElTableBody>，因此其中的组件也会被渲染两次

under will render two. In development mode, open vue-devtools and find that there are two under , so the components will also be rendered twice

Source

SHERlocked93

Most helpful comment

我认为它应当属于一个为了实现 fixed 效果而衍生的 bug。

hoythan on 17 Aug 2018

👍11

All 7 comments

Translation of this issue:

Element UI version
2.4.5

OS/Browsers version
Win10 / Chrome 68

Vue version
2.5.16

Reproduction Link
https://jsfiddle.net/SHERlocked93/mmx38qxw/4395/

Steps to reproduce
Click the expansion button on the right

Click the expand button on the right
What is Expected?

Only render the component <el-table-body> once, and the mounted method in the <this-expand> component is printed only once.
Render the component <el-table-body>only once, and the mounted method in the < this-expand > component only prints once.

What is actually happening?
The <el-table-body> below <el-table> will render two, and in the development mode, open the vue-devtools to find that there are two <ElTableBody> under <ElTable>, so the components will be rendered two times

under will render two. In development mode, open vue-devtools and.

element-bot on 31 Jul 2018

这不是一个 BUG。因为现在 fixed table 的实现方式就是用多个 table 拼装而成的，甚至头尾列都被 fixed 的时候 table body 会被渲染三次。

jikkai on 31 Jul 2018

我认为它应当属于一个为了实现 fixed 效果而衍生的 bug。

hoythan on 17 Aug 2018

👍11

这个确实会导致bug，如果table-column里面使用slot动态渲染的组件指定了ref的话，会导致ref重复，通过ref无法访问到该组件

miccuci on 6 May 2019

👍3

这不是一个 BUG。因为现在 fixed table 的实现方式就是用多个 table 拼装而成的，甚至头尾列都被 fixed 的时候 table body 会被渲染三次。

针对这个问题，目前有没有解决办法？
在组件中可以通过parent来判断组件是否属于fixed dom下，但是这很依赖于element的实现方式，如果有变动，那么这个判断逻辑就会改变。

Wetoria on 19 Sep 2019

👍1

通过'$parent.$el.offsetParent.className'获取父节点的class，判断里面是否包含fixed字段来判断是否输入fixed节点下渲染的。然后在非fixed节点下时，再进行后续的方法。

不过这个方法依赖Element的实现方式，万一有变更的话，会影响这个判断逻辑。我们项目目前把elementUI的版本给定死了

2019年10月16日 20:23，goodhome notifications@github.com 写道：

这不是一个 BUG。因为现在 fixed table 的实现方式就是用多个 table 拼装而成的，甚至头尾列都被 fixed 的时候 table body 会被渲染三次。

针对这个问题，目前有没有解决办法？
在组件中可以通过parent来判断组件是否属于fixed dom下，但是这很依赖于element的实现方式，如果有变动，那么这个判断逻辑就会改变。

请问可以请教一下你的实现思路吗?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/ElemeFE/element/issues/12177?email_source=notifications&email_token=AEBAJTQT4REJQ6PUNWBVNCTQO4BTBA5CNFSM4FM6DSTKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBMIT6Y#issuecomment-542673403, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEBAJTWJNG4WVMYEX3EZ6PLQO4BTBANCNFSM4FM6DSTA.

Wetoria on 16 Oct 2019

通过'$parent.$el.offsetParent.className'获取父节点的class，判断里面是否包含fixed字段来判断是否输入fixed节点下渲染的。然后在非fixed节点下时，再进行后续的方法。不过这个方法依赖Element的实现方式，万一有变更的话，会影响这个判断逻辑。我们项目目前把elementUI的版本给定死了
…

谢谢~