具有固定长度的 Svelte 字段答案

【问题标题】：Svelte field with a fixed length具有固定长度的 Svelte 字段
【发布时间】：2020-04-20 13:09:26
【问题描述】：

我正在开发一个 Svelte 应用程序；在这种情况下，我想显示带有 5 个字段的多行。其中一个字段包含一个描述，为了列出这个字段，我想给它一个固定的长度。

我试过这个 JavaScript 函数：

const fixLen = str => {
    let l = str.length;
    let s2 = "                    "; // 20 spaces
    let s3 = str + s2.substring(1, 21 - l);
    console.log(s3, s3.length);
    return s3;
  };

在 Svelte 中：

{#each records as record}
  <div>
    {record.date} {fixLen(record.desc)} {record.ref1} {record.accNo}
    {record.amount.toFixed(2)}
  </div>
{/each}

希望所有描述字段现在都具有相同的长度。但这不起作用！输出是这两行：

140318 ddddd ddddddd CK9730 7630 200.00
140318 dddd CK9731 7650 300.00

d 是描述。

我做错了什么？有人有解决办法吗？

谢谢！

【问题讨论】：

标签： javascript svelte-3

【解决方案1】：

您可以使用 CSS 将一个字段包装在一个 span 中并将其宽度设置为 20 个字符，而不是依赖 JavaScript 来执行此操作。

<style>
    span { display: inline-block; width: 20ch; }
</style>

{#each records as record}
  <div>
    {record.date} <span>{record.desc}</span> {record.ref1} {record.accNo} {record.amount.toFixed(2)}
  </div>
{/each}

从纯语义标记的角度来看，看起来您正在制作某种表格，在这种情况下，我认为使用表格会更好。

【讨论】：

确实；使用桌子更好。