この質(zhì)問は、ここで提供されている StackOverflow の回答のフォローアップです
この BootstrapVue テーブルの列ヘッダーに上付き文字を追加するにはどうすればよいですか?
これは、BootstrapVue テーブルの元のコードです。
リーリーこれは、BootstrapVue テーブルの列ヘッダーに上付き文字を追加するための答えです。
リーリー上記の答えは、元のコードでは正常に機(jī)能します。ただし、元のキー名 (age
) と % 文字 (%age new
) の間にスペースがある場(chǎng)合、答えは機(jī)能しません。キー名の間にスペースがある場(chǎng)合のコードです。
キー名の間にこの新しいスペースを追加すると、対応する答えは
になります。 リーリー次のエラーが表示されます;
リーリーこのエラーを修正するにはどうすればよいですか?
私は vue v2.6 と BootstrapVue を使用しています。
文字列リテラルを使用してみることができます
リーリーまたは、スペースをアンダースコアに置き換えるか、キャメルケースの名前付けキーを使用します
Vue は、#head(%age
および new)="data"
という 2 つの屬性を認(rèn)識(shí)します。これらは、まず HTML 屬性として解析され、次に Vue または Bootstrap から解析されます。構(gòu)文の意味は問いません。 Vue の (括弧と括弧)。この動(dòng)作については、ドキュメントの「動(dòng)的パラメーター構(gòu)文の制約」(v2 Documentation、v3 Documentation a>) で説明されています。プロパティ名が複雑であるため、プロパティ名が完全に動(dòng)的ではない場(chǎng)合でも、次の場(chǎng)合にも機(jī)能します:
屬性名は、受け入れられる文字 にかなり制限がありますが、スペースをエスケープする方法がないため、行き詰まってしまいます。これにより、2 つのオプションが殘ります:
percentagePropertyName = "head(%age new)"
構(gòu)文 #[percentagePropertyName]
(など) 。)。 percentage_new
などの特殊文字を含まない名前に変更します。これを dataArray = dataArray.map(x => ({ Percentage_new: x["%age new"], ...x }));
.## のようにデータ オブジェクトに簡(jiǎn)単にマッピングできます。