现在想要在 vue 项目中编写一个类似于 element-plus 中 el-table 的组件,使用方法和 element 中类似,如下
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
但是遇到了个问题,就是该如何在 el-table
组件中获取 el-table-column
中传递过来的属性呢
1
sanmaozhao 347 天前
既然都有参考的目标了,那就去看 element-plus 中 el-table 的组件 的源码啊
|
2
bojackhorseman 347 天前
通过 refs 吧
|
3
qingshui33 OP @sanmaozhao 上午看过来着,但是当时没太看懂,等下我再去看看
|
4
qingshui33 OP @bojackhorseman 是在插槽上使用吗
|
5
liuhuihao 347 天前
@qingshui33 #3 看下 element 的源码吧,element 是在 table 层建了一个 store ,然后 el-table-column mounted 的时候 调用了 store 的 insertColumn 保存起来。其实就相当于一个 局部的 store 大家都共享里面的值。
element-plus/packages/components/table/src/store/index.ts #73 element-plus/packages/components/table/src/table-column/index.ts #145 |
6
kylebing 347 天前
|
7
siguapajamas 347 天前 via Android
@liuhuihao 哥,想请教一下您,我当初在研究从零搭建 ele table 的时候也看到这个地方,搭建了小型的 store ,但是 B 站教程零零碎碎看不全,请问除了看源码你知道哪里有公开的教程嘛?
|
8
sjhhjx0122 347 天前
从 el-table 上依赖注入,el-table-column 传回去
|
9
qingshui33 OP @liuhuihao 好的,感谢感谢,我去研究研究
|
10
qingshui33 OP @kylebing 好的👌
|
11
qingshui33 OP @sjhhjx0122 可以的,我研究研究哈
|
12
liuhuihao 347 天前
@siguapajamas 这个我也不太清楚有没有哈,我也是临时看的源码
|
13
zcf0508 347 天前
|
14
siguapajamas 347 天前 via Android
@liuhuihao 好 谢谢你的回复
|
15
qingshui33 OP @zcf0508 这个可以的,收藏了,我试试去
|
16
sjhhjx0122 347 天前
@qingshui33 最后的那个链接就是我说的那个方法
|
17
chenjiangui998 347 天前
table provide 一个 register 的方法
|
18
qingshui33 OP @sjhhjx0122 我看了那个文章,后来感觉他那个不太适合我的场景,找了下,掘金的这篇文章比较适合我现在遇到的问题 https://juejin.cn/post/6900046013726195720
@chenjiangui998 嗯嗯,好的 |