- 作者：老汪软件技巧
- 发表时间：2024-08-26 00:04
- 浏览量：
<p>问题背景
封装el-table的时候有时候忘记语法了，然后问ai或者百度又出来一堆不太正确的回答，作此记录。
1.封装好的组件完整代码（基础版）
{{ column.render ? column.render(row) : getNestedProperty(row, column.prop)}}
2.使用
只需要传入tableHeaderList和tableData即可
{{ index + 1 }}
)
3.效果
4.核心代码：
{{ column.render ? column.render(row) : getNestedProperty(row, column.prop)}}
5.核心解析：
1.一定要在el-table-column中去遍历传进来的tableHeaderList，不要在el-table-column外层加一个div来遍历。
2.最重要的重点是，区分slot，如果外面不需要使用slot，则直接展示值，先要去判断有没有render函数（因为数据可能要经过处理才能展示在table上），如果有render函数，则展示render函数的返回值
3.如果没有render函数，那么就使用getNestedProperty来解析深层次的对象（比如我要展示租户，需要取得值是tenant对象下面name的属性值，所以用到这个方法来解析）
4.如果不需要slot，则使用作用域插槽来将数据传递回父组件，让父组件中的插槽进行使用
6.结语
这里仅仅只是写了一个最简单的封装，主要是把封装的核心代码分享出来的，其他的需要什么配置可以自己加哈
7.代码地址
github地址: /rui-rui-an/…
