如何通过element-ui table组件的render属性实现自定义渲染？

本文共计1551个文字，预计阅读时间需要7分钟。

前言：起因：在使用 element-ui table 组件时，由于表列比较多，一一手动写特別烦燥，因此想通过将所有表头定义成一个数组，通过遍历多种方式去实现。这样解决了手动编写很多 el-table-column 的情况。

前言

起因：

在使用 element-ui table组件时，由于表列比较多一个个写特别麻烦，所以想通过将所有表头定义成一个数组，通过遍历多方式去实现。这样解决了手写很多 el-table-column 的情况。

障碍：

类似于下面自定义表列的样式，它是通过 slot-scope 去覆盖 el-table-column 内部slot的样式实现的。那我们在遍历表头数组的时候如何实现呢？

参考：

用过 react 开发会经常用到 ant design ，其中它的 table 组件是可以接受 render属性的，下面使用table组件时，只需要定义好，columns(表头列) data(表的具体数据)即可。整体看起来很简洁 去渲染自定义的组件的。