这是一个创建于 377 天前的主题，其中的信息可能已经有所发展或是发生改变。
现在想要在 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 2023-12-12 13:38:48 +08:00
既然都有参考的目标了，那就去看 element-plus 中 el-table 的组件 的源码啊
|
 |
2
bojackhorseman 2023-12-12 13:48:06 +08:00
通过 refs 吧
|
 |
3
qingshui33 OP @sanmaozhao 上午看过来着，但是当时没太看懂，等下我再去看看
|
|
4
qingshui33 OP @bojackhorseman 是在插槽上使用吗
|
 |
5
liuhuihao 2023-12-12 14:30:29 +08:00
@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 2023-12-12 14:35:15 +08:00
|
 |
7
siguapajamas 2023-12-12 15:00:25 +08:00 via Android
@liuhuihao 哥，想请教一下您，我当初在研究从零搭建 ele table 的时候也看到这个地方，搭建了小型的 store ，但是 B 站教程零零碎碎看不全，请问除了看源码你知道哪里有公开的教程嘛？
|
 |
8
sjhhjx0122 2023-12-12 15:07:18 +08:00
从 el-table 上依赖注入,el-table-column 传回去
|
|
9
qingshui33 OP @liuhuihao 好的，感谢感谢，我去研究研究
|
|
10
qingshui33 OP @kylebing 好的👌
|
|
11
qingshui33 OP @sjhhjx0122 可以的，我研究研究哈
|
|
12
liuhuihao 2023-12-12 15:14:23 +08:00
@siguapajamas 这个我也不太清楚有没有哈，我也是临时看的源码
|
 |
13
zcf0508 2023-12-12 15:17:18 +08:00
|
|
14
siguapajamas 2023-12-12 15:17:45 +08:00 via Android
@liuhuihao 好 谢谢你的回复
|
|
15
qingshui33 OP @zcf0508 这个可以的，收藏了，我试试去
|
|
16
sjhhjx0122 2023-12-12 16:50:20 +08:00
@qingshui33 最后的那个链接就是我说的那个方法
|
 |
17
chenjiangui998 2023-12-12 20:57:07 +08:00
table provide 一个 register 的方法
|
|
18
qingshui33 OP @sjhhjx0122 我看了那个文章，后来感觉他那个不太适合我的场景，找了下，掘金的这篇文章比较适合我现在遇到的问题 https://juejin.cn/post/6900046013726195720
@chenjiangui998 嗯嗯，好的 |
Select Language