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 をよろしくお願いいたします。

以下もご興味があるかもしれません: