vueマルチテーブルレンダリング
7464 ワード
この間、仕事中にvueマルチテーブルレンダリングの問題に遭遇しました.具体的なニーズは、1ページに複数の不定長のヘッダーと内容のテーブルを動的にレンダリングすることです.自分がvueに接触して間もないので、この自分の解決を記録して、自分と必要な人を参考にすることができます.(注:ここではelementuiのテーブルコンポーネントを使用しています.)
本文では、最終的な実現効果、バックグラウンドデータの準備、実現構想、コードクリップの4つの面から紹介します.最終効果図: 実現構想: バックグラウンドは、複数のテーブルを含むセットを返します.各テーブルには、2つの部分、ダイナミックヘッダ配列、およびダイナミックオブジェクトテーブル配列が含まれます. レンダリング時、テーブル内のダイナミックヘッダ情報とテーブルの内容は別々にレンダリングされる. ダイナミックヘッダは、1つのループを使用してレンダリングされ、その数でテーブル列の数を制御します.ダイナミックテーブルの長さは主にテーブルの行数を制御するために使用されます. テーブル内のコンテンツの取得は、テーブルコンテンツデータの位置とテーブルヘッダの位置とを用いて位置決めされる.すなわち、indexは、テーブルコンテンツデータが現在の行を遍歴するインデックスであり、keyはテーブルヘッダの現在のコンテンツである.(ここではテストを容易にするためにheadが直接使う中国語だけで、オブジェクト配列を使ってヘッダー情報、key-value形式を格納することもできます) バックグラウンドデータ準備: コードフラグメント:
本文では、最終的な実現効果、バックグラウンドデータの準備、実現構想、コードクリップの4つの面から紹介します.
[
{
"columnHead":[" -1"," -2"],
"columnTitle":" -1",
"operateScore":15.0,
"timeUsed":"23"
"columnInfo":[
" ","9",
" ","9",
" ","1",
" ","1",
" ",
"9"," ","1",
" ","8",
" ， ","1",
" ","87"," ","89"
]},
{
"columnHead":[" -2"," -3"," -4"," -5"],
"columnTitle":" -2",
"operateScore":15.0,
"timeUsed":"23"
"columnInfo":[
" ","9", " ","9",
" ","1",
" ","1",
" ","9",
" ","1",
" ","8",
" ， ","1",
" ","87",
" ","79"]
}
]
{{ value.transformInfo[scope.$index][key] }}