又是许久没有写博客了，这几年的疫情，总是居家，时间久了，慢慢的总会想很多。现在越发觉得想做的事情一定要尽早去做，不然总说等下一次，很多时候，就没有下一次了。

今天给大家分享一下如何用原生JS封装一个基础版的ElementUI表格组件。代码篇幅较短，所以有很大的拓展空间，有兴趣可以自己捯饬一下，让功能更加完善。比如增加获取数据和设置数据的功能，再比如增加删除一行、添加一行的操作，以及整合一个分页组件，这些都是可以实现的，大家需要的话，后续有空再慢慢分享。

一、分析需求

今天要做的功能是一个用原生JS代码去手写一个基础版的ElementUI表格组件，任何一个需求做之前不要忙慌着去写，我们可以先构思一下。比如这个表格组件，要实现的话怎么样写更加简便呢？

既然打算用原生梭哈，那么html结构肯定是采用tabel，表格内又分为thead和tbody，还有一点是我们需要做到让表格的内容自动渲染，毕竟我们在使用表格的时候，数据都是从接口来的。有了大致的思路之后就可以着手去写代码了，这里我在一个文件夹下创建了四个文件，大家嫌麻烦的话也可以少写点。创建四个文件，index.html、index.js、tabel.js、tabel.css

二、直接上代码了

1、index.html中的内容只有css的引入和script标签的引入，其实这里css最好是在tabel.js中引入,做好模块化。

2、tabel.css就是很简单的样式，所以就写在前面了。

table {border-collapse: collapse;
}
table, th, td {font-size: 14px;color: #606266;padding: 10px 20px;border: 1px solid #ebeef5;
}

3、tabel.js就是今天的核心代码了

/**
* @class 基础版ElementUI组件
* @description 该组件可自定义标题内容、按钮文字内容、以及弹窗展示内容
* @param { Object } config 
* @param { Array } config.el -绑定的元素
* @param { Array } config.column -列
* @param { Array } config.tableData -行数据
*/
export class Table { // 封装要点：数据驱动视图constructor(config) {let { el, column, tableData } = configvar thHtml, tdHtml, trHtml = `` // 表头, 每行单元格, 表格每行tableData.forEach(tdItem => { // 遍历每一行thHtml = tdHtml = ``column.forEach(item => { // 遍历每一列thHtml += `${item.label}` // 表头htmltdHtml += `${tdItem[item.prop]}` // 单元格html})trHtml += `${tdHtml}` // 每行})// console.log(trHtml)this.initHTML = `${thHtml}${trHtml}`document.getElementById(`${el}`).innerHTML = this.initHTML}
}

4、index.js中使用tabel组件

import { Table } from './Table.js'let table = new Table({el: 'main',column : [{ prop: "date", label: '日期' }, // prop为每行数据渲染字段,label为每列表头{ prop: "name", label: '姓名' },{ prop: "address", label: '地址' }],tableData : [{date: '2016-05-02',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1520 弄'},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]
})

代码效果如下：

这里用的是静态数据， 未免有点low，我们就来请求一下接口看看吧，检验一下自己封装的组件能否做到自动渲染。

修改index.js中的代码如下：

import { Table } from './Table.js'let table = {el: 'main',column : [{ prop: "id", label: 'ID' },{ prop: "userId", label: '用户ID' },{ prop: "title", label: '标题' },{ prop: "body", label: '内容' }],tableData : []
}axios.get("https://jsonplaceholder.typicode.com/posts").then(res => {console.log(res.data);table.tableData = res.datanew Table(table)
})

实现效果如下，这里用的是 jsonplaceholder提供的接口。

本文为原创内容，如需转载，请注明出处，谢谢