V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qingshui33
V2EX  ›  Vue.js

vue table 组件求教

  •  
  •   qingshui33 · 345 天前 · 1586 次点击
    这是一个创建于 345 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    18 条回复    2023-12-12 22:00:42 +08:00
    sanmaozhao
        1
    sanmaozhao  
       345 天前
    既然都有参考的目标了,那就去看 element-plus 中 el-table 的组件 的源码啊
    bojackhorseman
        2
    bojackhorseman  
       345 天前
    通过 refs 吧
    qingshui33
        3
    qingshui33  
    OP
       345 天前
    @sanmaozhao 上午看过来着,但是当时没太看懂,等下我再去看看
    qingshui33
        4
    qingshui33  
    OP
       345 天前
    @bojackhorseman 是在插槽上使用吗
    liuhuihao
        5
    liuhuihao  
       345 天前
    @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
    siguapajamas
        7
    siguapajamas  
       345 天前 via Android
    @liuhuihao 哥,想请教一下您,我当初在研究从零搭建 ele table 的时候也看到这个地方,搭建了小型的 store ,但是 B 站教程零零碎碎看不全,请问除了看源码你知道哪里有公开的教程嘛?
    sjhhjx0122
        8
    sjhhjx0122  
       345 天前
    从 el-table 上依赖注入,el-table-column 传回去
    qingshui33
        9
    qingshui33  
    OP
       345 天前
    @liuhuihao 好的,感谢感谢,我去研究研究
    qingshui33
        10
    qingshui33  
    OP
       345 天前
    @kylebing 好的👌
    qingshui33
        11
    qingshui33  
    OP
       345 天前
    @sjhhjx0122 可以的,我研究研究哈
    liuhuihao
        12
    liuhuihao  
       345 天前
    @siguapajamas 这个我也不太清楚有没有哈,我也是临时看的源码
    zcf0508
        13
    zcf0508  
       345 天前
    siguapajamas
        14
    siguapajamas  
       345 天前 via Android
    @liuhuihao 好 谢谢你的回复
    qingshui33
        15
    qingshui33  
    OP
       345 天前
    @zcf0508 这个可以的,收藏了,我试试去
    sjhhjx0122
        16
    sjhhjx0122  
       345 天前
    @qingshui33 最后的那个链接就是我说的那个方法
    chenjiangui998
        17
    chenjiangui998  
       344 天前
    table provide 一个 register 的方法
    qingshui33
        18
    qingshui33  
    OP
       344 天前
    @sjhhjx0122 我看了那个文章,后来感觉他那个不太适合我的场景,找了下,掘金的这篇文章比较适合我现在遇到的问题 https://juejin.cn/post/6900046013726195720
    @chenjiangui998 嗯嗯,好的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3172 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:18 · PVG 20:18 · LAX 04:18 · JFK 07:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.