老师关于自己写复用性组件的问题

Question

老师。我现在需求是 想写一个像ele ui 中table组件一样的表格组件， 简单类型的，实现的功能是，数据的渲染和可以定制表格里面的数据的类型，比如可以是一个按钮可以是数据，表格的边框也是可以控制显示或者隐藏。 前排加粗序列号等等这些功能。 我现在就是没思路，知道的组件结构是 table组件里面嵌套columns组件（使用slot插槽， 设置表格属性用$attrs）。就是数据的循环交互啥的不知道咋实现，像了半天了。老师 我该怎么写， 麻烦老师您指点一下。感谢感谢

Answer 1

张轩 2021-08-17 09:53:10

同学你好啊 你说的数据循环是什么意思呢？可以把需求更细化一点，我看了你的描述不太清楚你卡在哪个点了，你可以先想这个组件长什么样？属性，事件都有什么。然后再开始写代码。

• 提问者 帅得无心敲代码 #1

  老师 我想象的组件结构是，一个table组件里面 嵌套 column组件。 就像dropdown组件一样的。 现在的问题是，后端给的数据是一个数组，数组里面是一组一组的对象，每一组对象就是一行数据。 目前卡的地方挺多的，第一个是，这个数组怎么由table组件传递给column组件，并且循环渲染出来，table组件计划里面只有一个插槽，全部的表格结构都写在column组件中。第二个是，column组件代表的是列，但是tr标签里面包裹多个td 是行，不知道该是怎么样的结构。我是完全一点思路都没有， 可能是我平常没怎么写过表格，不知道表格该怎写。我也不知道我的思路对不对，老师可以给我说说 实现一个表格组件的一个正确思路吗？ele的源码我都看了，想从中找到答案，但是完全看不懂，也没备注。。

• 张轩 回复 提问者 帅得无心敲代码 #2

  同学你好 Table 组件属于一个难度比较大的组件，需要有一定的基础和经验，所以这一点想看源代码还是会很懵的 对于思路来说 也需要梳理一下 我这周画一点时间 思考一下 简单给你写一下 我也只能提供一个大体思路 细节需要你自己看。这周晚些我给到你吧。

• 提问者 帅得无心敲代码 回复 张轩 #3

  谢谢老师。谢谢老师。感谢感谢太感谢啦。哈哈