标签：vue 表头 label key vue3 组件 Table antd

最近需要在不使用UI框架的情况下封装一个简单的表格，由于对antd-vue比较熟悉，所以仿照了antd-vue的样子写了个简化版的Table组件。

组件源码见另一篇博客，

用到的技术栈：VUE3、SCSS

用过antd-vue的都应该知道主要的传参是两个：columns和dataSource，分别对应表头信息和表格的数据信息。

1.表头数据columns

表头的传参数据结构如下：

[
  { label: '姓名', key: 'name' },
  { label: '年龄', key: 'age' }
]

• key：必须，用来标志当前行
• label：非必须，当前列的列头显示内容

子组件-表头的遍历：

 这部分代码基本都能看懂，简单的v-for遍历。

2.表格数据dataSource

表格数据传参的数据结构如下：

[
  {name: '张三', age: 24},
  {name: '李四', age: 45}   
]

可以看到dataSource里面的key都是columns里面的key字段对应的值

对应源代码如下：

 主要思路是先遍历每一行的数据，再在每一行的数据中根据columns遍历当前列的数据

做到这里不加66行的代码的话，整个表格显示功能就已经实现了。

但是如果当前行有操作（编辑/删除）的话，就需要使用插槽来实现了。

 3.当前行的操作功能

其实整个功能做起来比较简单，现在回想起来，还是自己对vue3的slot使用不太熟悉。

slot的基本使用见官网

这里能实现这个功能主要看的是作用域插槽的部分

代码还是看上面那张图的65、66两行。

但是columns的传参需要有变化：

[
  { label: '姓名', key: 'name' },
  { label: '年龄', key: 'age' },
  { label: '操作', key: 'operate', slots: 'operate'}   
]

 slots参数表示当前列需要使用插槽

父组件使用table组件：

<template #operate="record">
     <a @click="handleOperate(record.rowData)">详情</a>
</template>

注意：

• #operate是v-slot的简化写法
• record是子组件内的slot插槽传过来的参数
• rowData与Table组件的:rowData对应，即当前tr的内容

接下来贴上使用代码：

 可以看到使用基本和antd-vue差别不大了

4.其他功能

目前已经实现了表头固定table可滚动、宽度等基本功能、如果需要添加其他功能的话可以在此基础上添加各种传参即可

标签：vue,表头,label,key,vue3,组件,Table,antd
来源： https://www.cnblogs.com/codexlx/p/15476277.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。