20行原生JS代码手写ElementUI表格组件

news2024/11/24 16:08:14

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

今天给大家分享一下如何用原生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 charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="table.css">
    <script src="https://unpkg.com/axios@1.2.0/dist/axios.min.js"></script>
</head>
<body>
    <div id="main"></div>
    <script type="module" src="./index.js"></script>
</body>
</html>

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 } = config
        var thHtml, tdHtml, trHtml = `` // 表头, 每行单元格, 表格每行
        tableData.forEach(tdItem => { // 遍历每一行
            thHtml = tdHtml = ``
            column.forEach(item => { // 遍历每一列
                thHtml += `<th>${item.label}</th>` // 表头html
                tdHtml += `<td>${tdItem[item.prop]}</td>` // 单元格html
            })
            trHtml += `<tr>${tdHtml}</tr>` // 每行
        })
        // console.log(trHtml)
        this.initHTML = `<table><tr>${thHtml}</tr>${trHtml}</table>`
        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.data
    new Table(table)
})

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