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

<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="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)
      }
    }
  }
</スクリプト>

<テンプレート>
  <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
      }
    }
  }
</スクリプト>
 
<スタイルスコープ>
 
</スタイル>

<テンプレート>
  <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
})

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

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

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

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

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

 this.isAddIndex = true