vue2.0与vue3.0 循环渲染对比

Posted 2023-03-18

参考技术A

（1）将<el-table-column>标签的属性定义为一个数组columns,循环渲染数据。
（2）由于v-for和v-if不能作用在同一标签上，所以要用<template>包裹所有的<el-table-column>。
（3）循环渲染<<el-table-column>标签，并将需要添加插槽的单独领出来。

或者简单来写：

（1）使用jsx语法，在<el-table>标签内调用一个函数，函数返回值是<el-table-column>结构。
（2）遍历定义好的colums数组，循环渲染<el-table-columns>标签。
（3）可以在<el-table-columns>标签的html结构中使用jsx语法，判断是否需要添加插槽。
（4）使用jsx语法添加插槽，插槽内容是一个回调函数，函数 返回值 是要渲染的HTML结构，函数 参数 可以将当前行的数据传递给HTML结构。
（5）函数返回值是一个 函数子组件。

首先，在<el-table>标签内放入一个函数，返回值就是<el-table-column>结构

遍历columns循环渲染<el-table-column>，并区分哪些标签需要插槽

最后插槽使用函数子组件进行渲染