固定长度的 Svelte 字段

Question

我正在开发 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 是描述。

我做错了什么？请问大佬有解决办法吗？

谢谢！

Answer 1

您可以使用 CSS 来代替 JavaScript 来做到这一点，方法是将一个字段包装在一个跨度中并将其宽度设置为 20 个字符。

<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}

从纯语义标记的角度来看，您似乎在制作某种 table，在这种情况下，我认为最好使用 table.

固定长度的 Svelte 字段

Svelte field with a fixed length

javascript

svelte-3