国庆去了一趟西藏,那边的风景很赞👍,但是天天都会头疼😣,不禁感慨,还是写文章好啊✍,So,今天要和大家分享的是 table 组件的实现,是从 0 到 1 的实现哦,这个组件对于我们来说应该是挺复杂的一个了,看过那么多个初级组件,是时候装个叉了😏。
知识回顾
表格这东西我们肯定都接触过,尤其是在开发后台管理系统的时候,不过大部分都是直接用 UI 框架写的,久了都不知道原来是怎么写的了,所以在此我们先回顾一下🤔最原始的表格的基础写法:
姓名 | 职位 | 等级 |
---|---|---|
尤水就下 | 前端 | 小菜 |
其中要注意的就是 了,因为这个东西对我来说是挺陌生的(其实我不知道
😂),然后就搜了一下,原来它是方便我们给每个列设置一些共同属性的,比如宽度。因为后续我们会用到它,所以请务必记住👀。
目标
首先简要说下我们本篇文章要实现的东西:基础展示 + 全选 + 排序 + 展开 + 自定义内容 + 固定表头 +(多级表头 + 固定列)。然后话不多说,撸起袖子就是干💪。
基础展示
作为一个表格,展示数据是必备的功能