老师el-ui中table组件的问题

Question

老师。就是这个table-column组件。是怎么做到渲染一列数据的。  tr td 使用都是一行一行的渲染数据呀？ 看源码也看不到是什么原理。老师知道能说说吗？ 感谢。

Answer 1

张轩 2021-09-08 09:40:27

同学你好 这个组件很复杂 如果你想弄懂的话 一定要借助图表或者流程图将步骤写下来

我简单说一下代码逻辑：首先到 table-body 的这行：https://gitee.com/element-plus/element-plus/blob/dev/packages/components/table/src/table-body/index.ts#L78

这行在循环渲染一个 tbody 中 wrappedRowRender 这个方法

位置在：https://gitee.com/element-plus/element-plus/blob/dev/packages/components/table/src/table-body/render-helper.ts#L125

基本就是两层嵌套渲染 tr 以及 tr 中的 td。

特别注意它将全局的数据都保存在一个叫 store 的变量中，你说的一列列 column 数据也在其中 https://gitee.com/element-plus/element-plus/blob/dev/packages/components/table/src/table.vue#L311

• 提问者 帅得无心敲代码 #1

  老师 这个全是render函数写的。 看着好吃力哦。 但是我大致的渲染逻辑我是知道了。我现在自己写了一个简单的递归树型表格组件， 能正常的递归渲染数据。但是slot要报类型错误。 这个怎么解决呀？ 我懵了。我发一篇提问帖您能看下吗？