Vue + 要素の動的複数ヘッダーと動的スロット

Vue + 要素の動的複数ヘッダーと動的スロット

1. 需要

ユーザーが自分でテーブルを構成できるようになり、システム コードのメンテナンスの量が削減されます。

2. 効果

ヘッダーjson:

注:スコープ (フィールド名は別のものでも可) は、この列のスロットを有効にするかどうかです。複数レベルのヘッダーを含む propChildren があります。

   
テーブルヘッド: [{
    キー: '1'、
    ラベル: '日付'、
    プロパティ: '日付'、
    幅: '100',
    ヘッダー配置: 'center'、
    配置: '中央'、
    スコープ: false、
    ソート可能: true
  },
  {
    キー: '2'、
    ラベル: '名前',
    プロパティ: '名前',
    幅: '100',
    ヘッダー配置: 'center'、
    配置: '中央'、
    スコープ: false、
    ソート可能: false
  },
  {
    キー: '3'、
    ラベル: '分析'、
    プロパティ: '分析'、
    幅: '100',
    ヘッダー配置: 'center'、
    プロパティChildren: [{
      キー: '31'、
      ラベル: 「前年比」、
      プロパティ: 'TB'、
      幅: '100',
      ヘッダー配置: 'center'、
      配置: '中央'、
      スコープ: true、
      ソート可能: true
    },
    {
      キー: '32'、
      ラベル: 「月別」、
      プロップ: 'HB',
      幅: '100',
      ヘッダー配置: 'center'、
      配置: '中央'、
      スコープ: true、
      ソート可能: true
    },]
  },
  {
    キー: '4'、
    ラベル: '金額',
    プロパティ: '価格'、
    幅: '100',
    ヘッダー配置: 'center'、
    配置: '右'、
    スコープ: false、
    ソート可能: true
  },
  {
    キー: '5'、
    ラベル: '住所'、
    プロパティ: 'アドレス',
    幅: ''、
    ヘッダー配置: '左'、
    配置: '左'、
    スコープ: false、
    ソート可能: false
  }
  ]、

3. すべてのコード

<テンプレート>
  <el-テーブル
    :data="テーブルデータ"
    ストライプ
    サイズ変更可能
    国境
    高さ="300"
    スタイル="幅: 1000px"
  >
    <el-テーブル列
      タイプ="インデックス"
      :index="インデックスメソッド"
      label="シリアル番号"
      align="center"
      幅= "60"
    >
    </el-table-column>
    <el-テーブル列
      v-for="(item, index) in tableHead"
      :key="インデックス"
      :prop="アイテム.prop"
      :label="アイテム.ラベル"
      :width="アイテムの幅"
      :align="アイテム.align"
      :headerAlign="item.headerAlign"
      :sortable="アイテム.sortable"
      オーバーフローツールチップを表示
    >
      <el-テーブル列
        v-for="(item, index) in item.propChildren"
        :key="インデックス"
        :prop="アイテム.prop"
        :label="アイテム.ラベル"
        :width="アイテムの幅"
        :align="アイテム.align"
        :headerAlign="item.headerAlign"
        :sortable="アイテム.sortable"
        オーバーフローツールチップを表示
      >
        <テンプレート スロット スコープ="スコープ">
          <div v-if="item.scope === true">
            <div v-if="scope.row[item.prop] == ''">
              {{ スコープ.行[項目.プロパティ] }}
            </div>
            <div v-else-if="scope.row[item.prop] > '0'" スタイル="color: green">
              {{scope.row[item.prop] }}%<i class="el-icon-caret-top"></i>
            </div>
            <div v-else-if="scope.row[item.prop] < '0'" スタイル="color: red">
              {{scope.row[item.prop] }}%<i class="el-icon-caret-bottom"></i>
            </div>
          </div>
          <div v-else-if="scope.row[item.prop] < '0'" スタイル="color: red">
            {{ スコープ.行[項目.プロパティ] }}
          </div>
          <div v-else>{{ スコープ.行[item.prop] }}</div>
        </テンプレート>
      </el-table-column>
      <テンプレート スロット スコープ="スコープ">
          <div v-if="item.scope === true">
            <div v-if="scope.row[item.prop] == ''">
              {{ スコープ.行[項目.プロパティ] }}
            </div>
            <div v-else-if="scope.row[item.prop] < '0'" スタイル="color: red">
              {{ スコープ.行[項目.プロパティ] }}
            </div>
             <div v-else-if="scope.row[item.prop] > '0'">
              {{ スコープ.行[項目.プロパティ] }}
            </div>
          </div>
        <div v-else>{{ スコープ.行[item.prop] }}</div>
        </テンプレート>
    </el-table-column>
  </el-table>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      // 単一のヘッダーがこの列のデータを比較するかどうかは、スコープによって異なります。
      テーブルヘッド: [{
        キー: '1'、
        ラベル: '日付'、
        プロパティ: '日付'、
        幅: '100',
        ヘッダー配置: 'center'、
        配置: '中央'、
        スコープ: false、
        ソート可能: true
      },
      {
        キー: '2'、
        ラベル: '名前',
        プロパティ: '名前',
        幅: '100',
        ヘッダー配置: 'center'、
        配置: '中央'、
        スコープ: false、
        ソート可能: false
      },
      {
        キー: '3'、
        ラベル: '分析'、
        プロパティ: '分析'、
        幅: '100',
        ヘッダー配置: 'center'、
        プロパティChildren: [{
          キー: '31'、
          ラベル: 「前年比」、
          プロパティ: 'TB'、
          幅: '100',
          ヘッダー配置: 'center'、
          配置: '中央'、
          スコープ: true、
          ソート可能: true
        },
        {
          キー: '32'、
          ラベル: 「月別」、
          プロップ: 'HB',
          幅: '100',
          ヘッダー配置: 'center'、
          配置: '中央'、
          スコープ: true、
          ソート可能: true
        },]
      },
      {
        キー: '4'、
        ラベル: '金額',
        プロパティ: '価格'、
        幅: '100',
        ヘッダー配置: 'center'、
        配置: '右'、
        スコープ: false、
        ソート可能: true
      },
      {
        キー: '5'、
        ラベル: '住所'、
        プロパティ: 'アドレス',
        幅: ''、
        ヘッダー配置: '左'、
        配置: '左'、
        スコープ: false、
        ソート可能: false
      }
      ]、

      // データテーブルData: [{
        日付: '2016-05-02'、
        名前: 王小湖、
        HB: '-1.1'、
        TB: '2.5'、
        価格: '2982.01',
        住所: 上海市普陀区金沙江路1518号、...
      }, {
        日付: '2016-05-04'、
        名前: 王小湖、
        HB: '-0.28',
        TB: '1.1'、
        価格: '2982.01',
        住所: '上海市普陀区金沙江路1517号'
      }, {
        日付: '2016-05-01'、
        名前: 王小湖、
        HB: '28'、
        TB: '-0.11'、
        価格: '2982.01',
        住所: '上海市普陀区金沙江路1519号'
      }, {
        日付: '2016-05-03'、
        名前: '張三'、
        HB: '21'、
        TB: '2.11'、
        価格: '-201.02',
        住所: '上海市普陀区金沙江路1516号'
      }, {
        日付: '2016-05-11'、
        名前: '張三'、
        HB: '0.28'、
        TB: '-1.1'、
        価格: '2982.01',
        住所: '上海市普陀区金沙江路1516号'
      }, {
        日付: '2016-05-02'、
        名前: 王小湖、
        HB: '-0.18'、
        TB: '-1.15'、
        価格: '2982.01',
        住所: 上海市普陀区金沙江路1518号、...
      }, {
        日付: '2016-05-04'、
        名前: 王小湖、
        HB: '-1.01'、
        TB: '1.1'、
        価格: '2982.01',
        住所: '上海市普陀区金沙江路1517号'
      }, {
        日付: '2016-05-01'、
        名前: 王小湖、
        HB: '-28'、
        TB: '2.11'、
        価格: '2982.01',
        住所: '上海市普陀区金沙江路1519号'
      }, {
        日付: '2016-05-03'、
        名前: '張三'、
        HB: ''、
        TB: '0.1'、
        価格: '-200.01',
        住所: '上海市普陀区金沙江路1516号'
      }, {
        日付: '2016-05-11'、
        名前: '張三'、
        HB: '18'、
        TB: '-0.81',
        価格: '2982.01',
        住所: '上海市普陀区金沙江路1516号'
      }],
    }
  },
  メソッド: {
    インデックスメソッド(インデックス) {
      インデックス + 1 を返します。
    }
  }
}
</スクリプト>

これで、vue + element dynamic multiple headers と dynamic slots に関するこの記事は終了です。vue + element dynamic multiple headers と dynamic slots に関するその他の関連記事については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の要素カレンダー コンポーネントを使用したサンプル コード
  • vue+element-ui テーブルカプセル化タグラベルスロットの使用

<<:  Linuxネットワーク設定の基本操作コマンドを詳しく解説

>>:  MySQL マスタースレーブレプリケーションの実装手順

推薦する

フレックスレイアウトは、1行あたりの固定行数と適応レイアウトを実現します。

この記事では、1行あたりの固定行数+アダプティブレイアウトを実現するフレックスレイアウトを紹介し、皆...

Web デザインでフラッシュ オーバーレイ ポップアップ レイヤーの z-index プロパティを設定しても機能しない

デフォルトでは、Flash は常にページのトップレベルに表示されます。つまり、ページに DHTML ...

CentOS7 に YUM 経由で MySQL 5.7 をインストールする詳細な手順

1. インストールパッケージを保存する場所に移動しますcd /home/lnmp 2. MySQL ...

HTML でよく使われるタグの概要 (必読)

コンテンツ詳細タグ: <h1>~<h6>タイトルタグ<pre>テ...

Docker で Confluence をデプロイするための完全な手順

Confluence は有料ですが、クラックして使用できます (購入が推奨され、正規版がサポートされ...

Zabbix 監視 Docker アプリケーション構成

コンテナの応用はますます一般的になっていますが、大量のコンテナをどのように管理すればよいのでしょうか...

ウェブデザインの仕事に応募する方法

<br />みなさんこんにちは!ここで皆さんとチャットできて光栄です! (*^__^*)...

MySQLオンラインDDLの使用に関する詳細な説明

目次文章LOCKパラメータアルゴリズムパラメータCOPY TABLE プロセスIN-PLACEプロセ...

HTML pre タグ内の自動改行

このとき、overflow:auto;(コードがコンテナの境界を超えたときにスクロールボックスを表示...

Windows 10 での MySQL 8.0.16 のインストールと設定のチュートリアル

この記事では、参考までにMySQL 8.0.16のインストールと設定方法のグラフィックチュートリアル...

MySQLサービスが起動しても接続されない問題の解決策

mysql サービスは開始されていますが、接続できません。この問題を解決するにはどうすればよいでしょ...

ネイティブ JavaScript でシンプルな Gobang ゲームを実装する

この記事では、JavaScriptで簡単なGobangゲームを実装するための具体的なコードを参考まで...

WeChat アプレットの日付と時刻のコンポーネント (年、月、日、時間、分)

この記事の例では、WeChatアプレットの日付と時刻コンポーネントの具体的なコードを参考までに共有し...

Nodejs エラー処理プロセス記録

この記事では、接続エラー ECONNREFUSED を例に、Node.js がエラーを処理するプロセ...

MySQLデュアルマスター(マスターマスター)アーキテクチャ構成ソリューション

企業では、データベースの高可用性は常に最優先事項です。多くの中小企業は、MySQL マスター スレー...