vue table 组件求教

[qingshui33]

现在想要在 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 中传递过来的属性呢

[sanmaozhao]

既然都有参考的目标了，那就去看 element-plus 中 el-table 的组件 的源码啊

[bojackhorseman]

通过 refs 吧

[qingshui33]

@sanmaozhao 上午看过来着，但是当时没太看懂，等下我再去看看

[qingshui33]

@bojackhorseman 是在插槽上使用吗

[liuhuihao]

@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

[kylebing]

https://element-plus.org/zh-CN/component/table.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%97%E6%A8%A1%E6%9D%BF

[siguapajamas]

@liuhuihao 哥，想请教一下您，我当初在研究从零搭建 ele table 的时候也看到这个地方，搭建了小型的 store ，但是 B 站教程零零碎碎看不全，请问除了看源码你知道哪里有公开的教程嘛？

[sjhhjx0122]

从 el-table 上依赖注入,el-table-column 传回去

[qingshui33]

@liuhuihao 好的，感谢感谢，我去研究研究

[qingshui33]

@kylebing 好的👌

[qingshui33]

@sjhhjx0122 可以的，我研究研究哈

[liuhuihao]

@siguapajamas 这个我也不太清楚有没有哈，我也是临时看的源码

[zcf0508]

https://huali.cafe/post/vue-child-components-register/

这个可能是你想要的

[siguapajamas]

@liuhuihao 好 谢谢你的回复

[qingshui33]

@zcf0508 这个可以的，收藏了，我试试去

[sjhhjx0122]

@qingshui33 最后的那个链接就是我说的那个方法

[chenjiangui998]

table provide 一个 register 的方法

[qingshui33]

@sjhhjx0122 我看了那个文章，后来感觉他那个不太适合我的场景，找了下，掘金的这篇文章比较适合我现在遇到的问题 https://juejin.cn/post/6900046013726195720
@chenjiangui998 嗯嗯，好的