在前端开发中，展示列表数据时，表格是一个经常使用的方式。但是通过 HTML 和 CSS 来手动创建表格往往十分繁琐。这时便可以借助第三方的 npm 包，提高开发效率。
本文将介绍一个名为 slate-text-table 的 npm 包，它可以通过简单的代码生成漂亮的 ASCII 表格。
安装
通过 npm 包管理工具，输入以下命令安装 slate-text-table：
npm install slate-text-table --save
使用教程
引入 slate-text-table 后，使用下面的代码创建一个表格：
-- -------------------- ---- ------- ------ - --------- - ---- ------------------- ----- ------ - ------ ------- ------- ----- ---- - - - -- ------- -- -- - -- ------- -- -- - -- ------ -- - -- ------------------------------------ -------------------
以上代码的执行结果：
┌─────┬───────┬────┐ │ ID │ Name │ Age │ ├─────┼───────┼────┤ │ 1 │ John │ 28 │ │ 2 │ Lucy │ 22 │ │ 3 │ Tom │ 31 │ └─────┴───────┴────┘
如上所示，表格被生成并以字符串的形式输出。header 是一个包含表头的字符串数组，data 是二维数组，每行代表一条记录。使用 TextTable.create 方法可以创建一个包含表头和数据的表格对象，使用该对象的 stringify 方法可以将其转化为字符串。
除了常规的表格，slate-text-table 还支持以下高级的功能：
设置对齐方式
默认情况下，表格的每一列都是左对齐的，可以通过参数配置让某些列居中或右对齐，如下：
console.log(TextTable.create(header, data, {
align: ['left', 'center', 'right']
}).stringify())参数 align 是一个包含列对齐方式的数组，长度必须和列数一致，可以设置的值有 left, center 和 right。
执行以上代码，输出结果如下：
┌─────┬───────┬─────┐ │ ID │ Name │ Age │ ├─────┼───────┼─────┤ │ 1 │ John │ 28 │ │ 2 │ Lucy │ 22 │ │ 3 │ Tom │ 31 │ └─────┴───────┴─────┘
设置分隔线样式
默认的分隔线样式是 ─，可以通过参数 separator 来设置分隔线的样式，如下：
console.log(TextTable.create(header, data, {
separator: {
head: '|',
body: '-'
}
}).stringify())参数 separator 是一个对象，包含两个属性 head 和 body，它们的值分别代表表头和表格内容中的分隔线。
执行以上代码，输出结果如下：
┌─────┬───────┬────┐ | ID | Name | Age | ├─────┼───────┼────┤ | 1 | John | 28 | | 2 | Lucy | 22 | | 3 | Tom | 31 |
总结
从以上介绍可以看出，使用 slate-text-table 可以快速地生成漂亮的 ASCII 表格，并且支持多种高级功能。它是前端开发中十分实用的一个工具，使用它可以大大提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7c238a385564ab6a30