本文分享如何使用原生JavaScript封装一个基础版的ElementUI表格组件。通过分析需求，采用HTML的table结构，实现表格内容的自动渲染。文章提供了核心代码，并通过请求接口验证组件的自动渲染功能。
又是许久没有写博客了，这几年的疫情，总是居家，时间久了，慢慢的总会想很多。现在越发觉得想做的事情一定要尽早去做，不然总说等下一次，很多时候，就没有下一次了。
今天给大家分享一下如何用原生JS封装一个基础版的ElementUI表格组件。代码篇幅较短，所以有很大的拓展空间，有兴趣可以自己捯饬一下，让功能更加完善。比如增加获取数据和设置数据的功能，再比如增加删除一行、添加一行的操作，以及整合一个分页组件，这些都是可以实现的，大家需要的话，后续有空再慢慢分享。
一、分析需求
今天要做的功能是一个用原生JS代码去手写一个基础版的ElementUI表格组件，任何一个需求做之前不要忙慌着去写，我们可以先构思一下。比如这个表格组件，要实现的话怎么样写更加简便呢？
既然打算用原生梭哈，那么html结构肯定是采用tabel，表格内又分为thead和tbody，还有一点是我们需要做到让表格的内容自动渲染，毕竟我们在使用表格的时候，数据都是从接口来的。有了大致的思路之后就可以着手去写代码了，这里我在一个文件夹下创建了四个文件，大家嫌麻烦的话也可以少写点。创建四个文件，index.html、index.js、tabel.js、tabel.css
二、直接上代码了
1、index.html中的内容只有css的引入和script标签的引入，其实这里css最好是在tabel.js中引入,做好模块化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta 
最低0.47元/天 解锁文章
扫一扫
1511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
