動的テーブルを実装するための要素サンプルコード

動的テーブルを実装するための要素サンプルコード

【コード背景】

あるカテゴリに属する​​テーブルが 12 個ほどあるというビジネス需要のシナリオがあります。ユーザーは、異なるクエリ インジケーターを選択して、同じページに異なるテーブルを表示したいと考えています。これらのテーブルのヘッダー スタイルは似ていますが、まったく同じではありません。どうすればよいでしょうか。

これまでのところ、Element UI に基づくすべてのテーブル スタイルは、公式のものと同様に、ページ上に直接ハードコードされています。

<el-table :data="テーブルデータ" スタイル="幅: 100%">
    <el-table-column prop="date" label="日付" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="住所"></el-table-column>
</el-table>

上記の問題を解決する最も単純かつ最も暴力的な方法は、テーブルごとに別々のコンポーネントを作成し、選択ボックスを使用してイベントをトリガーし、異なるコンポーネントルートを切り替えてページをレンダリングすることです。もちろん、この方法は愚かであり、コード再利用の基本原則に準拠していません。そのため、怠惰になり、コード再利用の基本原則を順守するために、この問題を解決するより良い方法があるかどうか考え始めました。

この <el-table> をよく見てください。テーブル データは :data を通じてバインドされ、テーブル ヘッダー データは <el-table-column> タグを通じて表示されます。ヘッダー データを、何らかのパラメーター渡し方法を通じて v-for と組み合わせて、<el-table-column> の特定のデータをレンダリングすることもできますか? Baidu の助けを借りて、実際に何人かの専門家がこれを実行し、動的なテーブルを実現しました。参照リンクは下部にあります。無料で知識を共有してくれた専門家に特に感謝の意を表したいと思います。知識は貴重であり、学習には終わりがありません。

このプロジェクトの具体的な実装コードは以下のように記録されており、理解を助けるためにいくつかのコード注釈が改善されています。

【コード実装】

#1# -> コード再利用の基本は、再利用可能なコンポーネントが必要であることです

/components/Tableフォルダに2つの新しいコンポーネントを作成します。

ダイナミックテーブル.vue

<テンプレート>
  <!-- 動的表示テーブル -->
  <el-table :data="tableData" ボーダー ストライプ :height="高さ" @row-click="handleRowClick">
    <!-- ヘッダーデータを取得するための v-for ループ -->
    <template v-for="テーブルヘッダー内の項目">
      <table-column v-if="item.children && item.children.length" :key="item.id" :column-header="item" />
      <el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center" />
    </テンプレート>
  </el-table>
</テンプレート>
<スクリプト>
  '@/components/Table/TableColumn' から TableColumn をインポートします。
 
  エクスポートデフォルト{
    名前: 'DynamicTable',
    コンポーネント:
      テーブル列
    },
    小道具: {
      // テーブルデータ tableData: {
        タイプ: 配列、
        必須: true
      },
      // 複数レベルのテーブルヘッダーデータ tableHeader: {
        タイプ: 配列、
        必須: true
      },
      // テーブルの高さ: {
        タイプ: 文字列、
        デフォルト: '300'
      }
    },
    メソッド: {
      // 行クリックイベント handleRowClick (行、列、イベント) {
        // コンソール.log(行)
        // console.log(列)
        // コンソール.log(イベント)
        // 親コンポーネントに行クリックイベントを通知します // 行はパラメータとして渡されます this.$emit('row-click', row)
      }
    }
  }
</スクリプト>

テーブル列.vue

<テンプレート>
  <el-テーブル列
    :label="列ヘッダーラベル"
    :prop="列ヘッダー.ラベル"
    align="center"
  >
    <!--columnHeader は column-header に対応します -->
    <template v-for="columnHeader.children 内の項目">
      <テーブル列
        v-if="item.children && item.children.length"
        :key="アイテムID"
        :column-header="項目"
      />
      <el-テーブル列
        v-else
        :key="アイテム名"
        :label="アイテム.ラベル"
        :prop="アイテム.prop"
        align="center"
      />
    </テンプレート>
  </el-table-column>
</テンプレート>
 
<スクリプト>
  エクスポートデフォルト{
    名前: 'TableColumn',
    小道具: {
      列ヘッダー: {
        タイプ: オブジェクト、
        必須: true
      }
    }
  }
</スクリプト>
 
<スタイルスコープ>
 
</スタイル>

重要な注意事項がいくつかあります:

(1)テーブルヘッダーに渡されるパラメータは、主に子ノードありと子ノードなしの2つのカテゴリに分けられます。次の図に示します。

複雑なヘッダーのレンダリングを完了するには、子ノードが使用されることに注意してください。たとえば、上記の例の最終的なヘッダーのレンダリング スタイルは次のようになります。

質問は、<el-table-column> は <el-table> のタグですが、この <table-column> とは何でしょうか?

(2) DynamicTable.vueはTableColumn.vueコンポーネントを呼び出す

DynamicTable.vue は、:column-header を通じて、子ノードを含むヘッダー情報を TableColumn.vue に渡します。このノード情報を受け取った後、TableColumn.vue は主に次の 2 つのことを行います。

まず、<el-table-column> を通じてラベルタグをレンダリングします。

2番目: ノードに子ノードがあるかどうかを判定し続けます

=> 子ノードがある場合は、<table-column> を介してレンダリングを続行し、この子ノードを TableColumn.vue コンポーネントに渡し、上記の手順を繰り返します。

=> 子ノードがない場合、これは終端ノードであり、<el-table-column>レンダリングで終了することを意味します。

#2# -> 表示ページで動的なテーブルコンポーネントを使用する

<テンプレート>
  <div class="demo">
    <el-card>
      <!--クエリ領域-->
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span style="margin-right: 10px">選択ボックス -</span>
            <el-選択
              v-model="指定されたテーブル"
              placeholder="選択してください"
            >
              <el-オプション
                v-for="オプション内の項目"
                :key="item.zb_code"
                :label="item.zb_name"
                :value="item.zb_code"
              />
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" plain @click="handleQueryClick">クエリ</el-button>
          </div>
        </el-col>
      </el-row>
      <!--テーブル領域-->
      <ダイナミックテーブル
        v-if="dynamicTableShow"
        :table-data="テーブルデータ"
        :table-header="テーブルヘッダー"
        :height="'550px'"
      />
    </el-card>
  </div>
</テンプレート>
<スクリプト>
  // コンポーネントをインポートする import DynamicTable from '@/components/Table/DynamicTable'
  // テーブルヘッダー情報を取得する import { getTableHeader02_1, getTableHeader02_2, getTableHeader02_3, getTableHeader02_4 } from '@/api/table-header'
 
  エクスポートデフォルト{
    名前: 'インデックス'、
    components: { // コンポーネント登録 DynamicTable
    },
    データ () {
      戻る {
        // -- クエリ ----------------------
        オプション: [
          // { zb_name: 'インジケータ名', zb_code: 'インジケータコード' }
        ]、
        指定されたテーブル: '', // インデックス値 // -- テーブル---------------------
        dynamicTableShow: true, // DynamicTable コンポーネントは変数を再レンダリングします // テーブル ヘッダー データ tableHeaders: [],
        // テーブルデータ tableData: []
      }
    },
    作成された(){
      // api - インジケーターのドロップダウンボックスデータを取得する getSpecifiedTable().then(res => {
        this.options = res.data
      })
    },
    メソッド: {
      // 値が配列内にあるかどうかを確認します isExistArr (arr, val) {
        arr.includes(val) を返す
      },
      // テーブルを再レンダリングします refreshTable (zb_code) {
        // 値に応じてラベル値を取得します const obj = this.options.find((item) => {
          戻り値 item.zb_code === zb_code
        })
        コンソールログ(zb_code)
        コンソールログ(obj.zb_name)
        // dynamicTableShow を false に設定して、DynamicTable コンポーネントが再レンダリングされるようにします。this.dynamicTableShow = false
        // 異なるインジケータに応じて異なるテーブルヘッダーをレンダリングします const TBArr01 = ['M01', 'M02', 'M03', 'M05'] // カテゴリ 1 テーブル const TBArr02 = ['M04', 'M07', 'M08', 'M12'] // カテゴリ 2 テーブル const TBArr03 = ['M09', 'M10', 'M11'] // カテゴリ 3 テーブル const TBArr04 = ['M06'] // カテゴリ 4 テーブル if (this.isExistArr(TBArr01, zb_code)) {
          this.tableHeaders = getTableHeader02_1(obj.zb_name) // ヘッダースタイル1をレンダリング
        }
        if (this.isExistArr(TBARr02, zb_code)) {
          this.tableHeaders = getTableHeader02_2(obj.zb_name) // ヘッダースタイル2をレンダリング
        }
        if (this.isExistArr(TBARr03, zb_code)) {
          this.tableHeaders = getTableHeader02_3(obj.zb_name) // ヘッダースタイル3をレンダリング
        }
        if (this.isExistArr(TBARr04, zb_code)) {
          this.tableHeaders = getTableHeader02_4(obj.zb_name) // ヘッダースタイル4をレンダリング
        }
        // api - テーブルデータを取得するgetTableList02(zb_code).then(res => {
          this.tableData = res.data
        })
        // DOMはまだ更新されていないため、ここでのコードは必須です this.$nextTick(() => {
          // DOM が更新されました this.dynamicTableShow = true
        })
      },
      // [クエリ]イベントをクリック handleQueryClick() {
        const zb_code = this.specified_table
        // クエリ条件が空にならないことを確認します if (zb_code === '' || zb_code === undefined) {
          this.$message.warning('インジケーターは空にできません!')
        } それ以外 {
          console.log('zb_code: ' + zb_code)
          // ヘッダーとテーブルを再レンダリングします this.refreshTable(zb_code)
        }
      }
    }
  }
</スクリプト>

動的テーブル コンポーネントの使用は比較的簡単です。注意する必要があるのは、テーブル ヘッダーとデータをレンダリングするときに次のコードを追加する必要があることだけです。そうしないと、ページが期待どおりにレンダリングされません。

this.$nextTick(() => {
    // DOM が更新されました this.dynamicTableShow = true
})

this.$nextTick() の詳細については、公式 Web サイト (https://cn.vuejs.org/v2/guide/reactivity.html) を参照してください。

#3# -> 必要に応じて動的テーブルにシーケンス列/インデックス列を動的に追加する方法

Element UI の公式の例では、テーブルにシリアル番号列またはインデックス列を追加する必要がある場合、それは非常に簡単です。<el-table> で特別な <el-table-column> を宣言するだけです。

<el-table-column type="index" width="50"></el-table-column>

では、動的テーブル コンポーネントにシリアル番号列を追加するにはどうすればよいでしょうか?さらに、必要に応じて追加したり追加しなかったりするとどうなるでしょうか?

まず、DynamicTable.vueを変換しましょう

公式の例と同様に、まず<el-table>内に<el-table-column>を宣言します。

<el-table-column v-if="isIndex" type="index" width="100" label="シリアル番号" align="center" />

親コンポーネントに渡す必要があるキー値である isIndex 値にバインドされた v-if があることに注意してください。

propsでisIndexをブール型として宣言する

 小道具: {
      // テーブルデータ tableData: {
        タイプ: 配列、
        必須: true
      },
      // 複数レベルのテーブルヘッダーデータ tableHeader: {
        タイプ: 配列、
        必須: true
      },
      // テーブルの高さ: {
        タイプ: 文字列、
        デフォルト: '300'
      },
      // シリアル番号列を追加する必要がありますか? isIndex: {
        タイプ: ブール値
      }
}

表示ページでコンポーネントを使用する場合は、指定されたパラメータを:is-index経由で渡します。

 <ダイナミックテーブル
        v-if="dynamicTableShow"
        :table-data="テーブルデータ"
        :table-header="テーブルヘッダー"
        :height="'550px'"
        :is-index="true"
/>

同じページのヘッダーを切り替える必要がある場合、上記の書き方では、ページが初期化されたときに、下図のように別のシリアル番号列が表示されやすく、非常に見苦しいです。

テーブルヘッダーがレンダリングされるときに、シリアル番号列が他の通常の列と同時に読み込まれるようにしたいです。これは次のように行うことができます。

<ダイナミックテーブル
        v-if="dynamicTableShow"
        :table-data="テーブルデータ"
        :table-header="テーブルヘッダー"
        :height="'550px'"
        :is-index="isAddIndex"
/>

元の定数「true」を変数 isAddIndex に変更し、ヘッダーのレンダリングが完了したらその値を true に変更します。

 this.isAddIndex = true

この方法では、序数列を他の通常の列と同時にレンダリングできます。

【参考文献】

https://www.jianshu.com/p/9c4ba833658f

https://www.cnblogs.com/llcdxh/p/9473458.html

Element で動的テーブルを実装するためのサンプルコードに関するこの記事はこれで終わりです。Element の動的テーブルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+Element の動的フォーム、動的テーブル (バックエンドが設定を送信し、フロントエンドが動的に生成) の詳細な説明
  • vue+element テーブルで動的な列フィルタリングを実装するためのサンプルコード
  • 要素内のテーブルを動的にマージする手順
  • Vue+elementは動的なフォームを作成し、テーブルの行と列を動的に生成します
  • elementUI テーブルの動的マージのサンプル コード
  • VUE2.0+ElementUI2.0 テーブル el-table loop 動的列レンダリングの書き方を詳しく解説
  • 要素 UI テーブルの動的列に空白が表示されるバグ修正方法

<<:  CentOS7仮想マシンがインターネットにアクセスできない問題を解決し、CentOS7仮想マシンが静的IPを使用してインターネットにアクセスするように設定します。

>>:  MySQLはランダムに一定数のレコードを抽出します

推薦する

MySQL json 形式のデータクエリ操作

デフォルトのテーブル名はbase_dataで、json列名はjson_valueです。 json_v...

SQL 実践演習: オンライン モール データベース ユーザー情報データ操作

オンラインショッピングモールデータベース - ユーザー情報データ運用プロジェクトの説明電子商取引の台...

Mysqlリモート接続構成を実装する2つの方法

Mysqlリモート接続構成を実装する2つの方法会社で働いていると、誰かのコンピュータに保存されている...

WeChatミニプログラムでのマップの正しい使用例

目次序文1. 準備2. 実際の戦闘2.1 ミニプログラムの権限を設定する2.2 カプセル化ツールの機...

ウェブページの広告デザインにおけるウェブデザインの寸法とルール

1. 800*600 未満の場合、Web ページの幅が 778 以内であれば、水平スクロール バーは...

Linux と Windows でスケジュールされたタスクを設定する方法

目次リナックス1. crontabの基本的な使い方2. ログを有効にする3. スケジュールされたタス...

MySQL の null 可能フィールドは NULL に設定する必要がありますか、それとも NOT NULL に設定する必要がありますか?

MySQL を頻繁に使用する人は、次のような状況に遭遇する可能性があります。 1. フィールド タ...

光るテキストとちょっとしたJS特殊効果を実現するCSS

実装のアイデア: CSSでtext-shadowを使用してテキストの光る効果を実現します効果画像: ...

NodeJSのモジュール性に関する詳細な説明

目次1. はじめに2. 本文2.1 モジュールとは何ですか? 2.2 解決2.3、require.r...

Ubuntuのpython3でvenvを使用して仮想環境を作成する

1. 仮想環境はプロジェクトに従い、単一のプロジェクト用の仮想環境を作成します(Python 3.4...

CSS で高さが不明な垂直中央揃えを実装する

この記事では主に、高さが不明な垂直方向の中央揃えを CSS で実装する方法を紹介し、皆さんと共有しま...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...

CSS3 3Dクールキューブ変形アニメーションの実装

私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...

MySQL 8.0.22 のインストールと設定方法のグラフィックチュートリアル

この記事ではMySQL 8.0.22のインストールと設定について記録します。具体的な内容は以下のとお...