如何使用 JavaScript 生成舒适的表单

Question

我想使用 JavaScript 生成一个看起来很舒服的表单，如下所示

但是，我尝试

console.table

这样做，但它实际上生成了一个糟糕的表单。 我该如何解决这个问题？

export function showNodeVersion(metadata: Metadata[]): void {
    const current = getCurrent(metadata).slice(0, 9);
    const lts = getLTS(metadata).slice(0, 9);
    const craft = {
        Current: current.map(m => {
            return m.version;
        }),
        LTS: lts.map(m => {
            return m.version;
        })
    }
    console.table(craft)
}

Answer 1

console.table

可以生成一个类似于所示所需输出的表格，但有一些注意事项：

• 数据需要作为对象数组提供，
• 可以使用

  console.log

  ,
的第二个参数以数组形式提供列标题
• 左侧出现一个额外的列，显示数组索引值。
• 列内容似乎以可变宽度字体（不是等宽字体）提供，并带有左对齐。

将以下内容复制并粘贴到浏览器控制台中，然后按 Enter 键查看输出（代码片段似乎不支持

console.table

）。

// 4 rows of dummy data:

const sep = /,\s*/;
const CURRENT = "21.4.0,  21.3.0, 21.2.0,  21.1.0"  .split(sep); 
const LTS =     "20.10.0, 20.9.0, 18.19.0, 18.18.2" .split(sep);

const table = [];
const nRows = 4;
for( let i = 0; i < nRows; ++ i) {
  table.push( {CURRENT: CURRENT[i], LTS: LTS[i]})
}

console.table( table, ["CURRENT", "LTS"]);

如果警告可以接受，您仍然需要为帖子所需输出中显示的四列创建表数据。