VueパッケージelementUIテーブルコンポーネント動的列

現在、列は動的に表示されることが要件です。単純な列であれば、簡単に実行できます。直接ループされます。各列の形式が異なることが要件です。一部の列はテキストであり、一部の列はテキストです。は入力ボックスで、一部は計算ボックスです。

具体的な要件は次の図のとおりです。可能な場合はコメントと説明を入力してください

コードに直接：TreeTableNew.vue

<template>
  <div>
    <el-table :data="opt.data" style="width: 100%" :row-key="opt.key" border>
      <template v-for="(column, index) in opt.columns">
        <el-table-column :prop="column.key" :key="column.key" :label="column.label">
          <template slot-scope="scope">
           
            <el-input-number
              v-if="column.showFlag.isnumber"
              v-model="scope.row.inputNum"
              controls-position="right"
              :min="1"
            ></el-input-number>

            <el-input v-else-if="column.showFlag.isinput" v-model="scope.row[column.key]"/>
            
            <span v-else>{
   
   {scope.row[column.key]}}</span>

          </template>
        </el-table-column>

      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    opt: {
      type: Object
    }
  },
  data() {
    return {};
  },
  methods: {}
};
</script>

メインコードの説明：

サイクルデータ：

opt.dataは、循環列のデータであり、通常の使用と同じです（通常の固定列を使用する必要があります）。これは、次の行と4列の値です（コード： '1＃'）。、調整： '50'

ループ列のプロパティ：

forループを使用して列を動的に展開すると、列の属性がopt.columnsにカプセル化されます。opt.dataとopt.columnsの関係を明確に確認できます。opt.columnsには、opt.dataの5つの値に対応する5つの属性キーがあります。

列タイプの判断：

これは主にopt.columnsのshowFlagによって判断され、必要に応じて作成できます

この場合、メインのデータ構造がバックグラウンドで返され、フォアグラウンドを移動せずに動的な列拡張を実現できます。

コンポーネントの親ページを使用します。

<TreeTableNew：opt = "opt"> </ TreeTableNew>

データ領域：

   opt: {
        data:[
          {
            code:'1#',
            // basic:'50',
            //  choice:'10',
            adjust:'50',
            target:'4848',
            actual:'5000',
          },
          {
            code:'2#',
            // basic:'40',
            //choice:'10',
            adjust:'40',
            target:'4000',
            actual:'4010',
          },
          {
            code:'3#',
            adjust:'50',
            target:'5000',
            actual:'5010',
          }
        ],
        columns: [
          {
            key: 'code',
            label: '站',
            showFlag:{
              isnumber:false,
              isinput:false,
            },
          },
          {
            key: 'adjust',
            label: '调整',
           showFlag:{
              isnumber:true,
              isinput:false,
            },
          },
          {
            key: 'target',
            label: '目标',
           showFlag:{
              isnumber:false,
              isinput:true,
            },

          },
          {
            key: 'actual',
            label: '实际',
           showFlag:{
              isnumber:false,
              isinput:true,
            },

          }
        ],
        key: "id",

      },

VueパッケージelementUIテーブルコンポーネント動的列

おすすめ