Vue Elementのテーブルコンポーネントをカプセル化する方法

エクスポートデフォルト{
 機能的: 真、
 プロパティ: {},
 レンダリング(createElement、コンテキスト) {
   createElement('span', 'hello world') を返します
 }
}

<テンプレート>
 <div>
  <el-table :data="cfg.data" style="width: 100%" v-on="cfg.on" v-bind="attrs" v-loading="読み込み中">
   <el-table-column v-if="cfg.hasCheckbox" v-bind="selectionAttrs" type="selection" width="55" label="xx" />
   <el-table-column v-for="cfg.headers 内の n" :prop="n.prop" :label="n.label" :key="n.prop" v-bind="{...columnAttrs, ...n.attrs}">
    <テンプレート スロット スコープ="{行}">
     <スロット:name="n.prop":row="行"><セル:config="n":data="行" />></スロット>
    </テンプレート>
   </el-table-column>
  </el-table>
  <el-ページネーション
   クラス="ページネーション"
   v-if="ページを表示"
   layout="total, sizes, prev, pager, next, jumper"
   :ページサイズ="[2, 3, 6, 11]"
   :page-size="ページサイズ"
   :total="ページ合計"
   :current-page="ページ.ページ"
   @current-change="ページを読み込む"
   @size-change="サイズ変更"
  />
 </div>
</テンプレート>

<スクリプト>
'./cell' からセルをインポートします

エクスポートデフォルト{
 コンポーネント:
  細胞、
 },
 小道具: {
  設定: オブジェクト、
 },
 データ（）{
  戻る {
   読み込み中: true、
   列属性: {
    配置: '左'、
    サイズ変更可能: false、
   },
   cfg: {
    オン: this.getTableEvents(),
    属性: {
     境界線: true、
		   ストライプ: true、
    },
    データ： []、
    ...this.config、
   },
   ページ: {
    サイズ: this.config.size || 10,
    ページ: 1,
    合計: 0,
   },
   チェック済み: [],
  }
 },
 作成された(){
  これをロードします。
 },
 計算: {
  選択属性(){
   {selectable、reserveSelection = false} = this.config || {}、obj = {};
   // チェックボックスは選択可能か if(selectable && typeof selectable == 'function'){
    オブジェクト.assign(obj, {
     選択可能、
    })
   }
   //reserve-selection は type=selection の列に対してのみ有効です。タイプはブール値です。true の場合、データが更新された後も、以前に選択されたデータが保持されます (行キーを指定する必要があります)
   if(reserveSelection){
    オブジェクト.assign(obj, {
     'reserve-selection': reserveSelection、
    })
   }

   obj を返します。
  },
  属性(){
   {config: {spanMethod, rowKey}, cfg: {attrs}} を this とします。
   // セルを結合 - spanMethod は親コンポーネントから渡されたセルを結合する方法です。要素のセルの結合を参照してください if (spanMethod && typeof spanMethod == 'function') {
    オブジェクト.assign(attrs, {
     'span-method': spanMethod、
    })
   }
   // テーブルのページ全体を選択するには、row-key と reserve-selection を設定する必要があります。reserve-selection は、選択タイプである el-table-column にのみ設定できます。if(rowKey && typeof rowKey == 'function'){
    オブジェクト.assign(attrs, {
     '行キー': 行キー、
    })
   }

   属性を返します。
  },
  ページを表示(){
   {サイズ、合計} = this.page;
   合計サイズ < を返します。
  },
 },
 メソッド: {
  テーブルイベントを取得する(){
   {hasCheckbox = false} を this.config || {}、events = {}、_this = this とします。
   if(チェックボックスがある場合){
    // イベントをバインドする Object.assign(events, {
     '選択変更'(v){
     	_this.checked = v;
     },
    });
   }

   イベントを返します。
  },
  // チェックされた行を取得する getChecked(){
   this.checked を返します。
  },
  // リクエストデータ load(p = {}){
   {size、page} = this.page、{loadData = () => Promise.resolve({})} = this.config; とします。
   this.loading = true;
   // ここでの loadData のパラメータは、初期化時にページングに必要なページとサイズのみです。インターフェースに必要なその他のパラメータは、親コンポーネントの loadData で渡されます。loadData({...p, page, size}).then(({data, total}) => {
    this.cfg.data = データ;
    this.page.page = ページ;
    this.page.total = 合計;
    this.loading = false;
   });
  },
  ロードページ(インデックス){
   this.page.page = インデックス
   これをロードします。
  },
  sizeChange(サイズ){
   this.page.size = サイズ
   これをロードします。
  },
  // 通常、このメソッドはクエリボタンをクリックしたとき、またはテーブルリストを部分的に更新したときに呼び出されます。パラメータが渡されない場合は、デフォルトで最初のページからリロードします (p = {}) {
   このページ = 1
   これをロードします(p);
  },
 },
}
</スクリプト>

'./components' からコンポーネントとして * をインポートします。
空 = '-'
エクスポートデフォルト{
 小道具: {
  設定: オブジェクト、
  データ: オブジェクト、
 },
 機能的: 真、
 レンダリング: (h, c) => {
  let {props: {config = {}, data = {}}} = c, {prop, type = 'Default'} = config, value = data[prop] || config.value, isEmpty = value === '' || value === undefined;
  isEmpty を返します? h(Components.Default, {props: {value: empty}}) : h(Components[type], {props: {value, empty, data, ...config}});
 }
}

'./Date' から Date をインポートします。
'./Default' から Default をインポートします。
'./Currency' から Currency をインポートします。
'./Enum' から Enum をインポートします。
'./Action' から Action をインポートします。
'./Link' から Link をインポートします。
'./Format' から Format をインポートします。
'./Popover' から Popover をインポートします。

輸出 {
 デフォルト、
 日付、
 通貨、
 列挙、
 アクション、
 リンク、
 形式、
 ポップオーバー、
}

<テンプレート機能>
  <span>{{props.value | 日付(props.format)}}</span>
</テンプレート>

<テンプレート機能>
  <span>{{props.value}}</span>
</テンプレート>

<テンプレート機能>
  <span>{{props.value | 通貨}}</span>
</テンプレート>

mapIdAndKey を list とします => list.reduce((c, i) => ({...c, [i.key]: i}), {});

STATUS = {とする
  順序: mapIdAndKey([
    {
      id: 'ドラフト',
      キー: 'CREATED'、
      val: '送信されていません',
    },
    {
      id: '保留中'、
      キー: 'IN_APPROVAL'、
      val: '審査中',
    },
    {
      id: '拒否'、
      キー: '拒否'、
      val: '承認が拒否されました',
    },
    {
      id: '拒否',
      キー: '拒否'、
      val: '承認が拒否されました',
    },
    {
      id: 'サイン',
      キー: 'CONTRACT_IN_SIGN'、
      val: '契約書への署名',
    },
    {
      id: 'signDone',
      キー: 'CONTRACT_SIGNED'、
      val: '契約書に署名しました',
    },
    {
      id: 'lendDone',
      キー: 'LENDED'、
      val: '融資成功',
    },
    {
      id: 'lendReject',
      キー: 'LOAN_REJECT'、
      val: '融資拒否'、
    },
    {
      id: 'キャンセル',
      キー: 'キャンセル'、
      val: 'キャンセルに成功しました',
    },
    {
      id: 'inLend',
      キー: 'IN_LOAN'、
      val: 'ローン承認進行中',
    },
  ]）、
  モニター:mapIdAndKey([
    {
      キー: '00'、
      val: '監視されていません',
    },
    {
      キー: '01'、
      val: 'モニタリング',
    },
  ]）、
}

エクスポートデフォルト{
  機能的: 真、
  render(h, {props: {値, Enum, 空}, 親}){
    enums = Object.assign({}, STATUS, parent.$store.getters.dictionary) とします。
      {name = '', getVal = (values, v) => values[v]} = Enum、_value = getVal(enums[name]、value);
      
    if(_value === undefined) の場合、h('span', _value === undefined ? 空の場合 : _value) を返します。

    {id, val} = _value とします。
    h('span', {staticClass: id}, [h('span', val)] を返します。
  }
}

const getAcitons = (h, 値, データ) => {
 結果 = value.filter(n => {
  {filter = () => true} = n とします。
  filter.call(n, data) を返します。
 });

 result.map(a => h('span', {class: 'btn', on: {click: () => a.click(data)}, key: a.prop}, a.label)) を返します。
}

エクスポートデフォルト{
 機能的: 真、
 レンダリング: (h, {props: {value, data}}) => {
  h('div'、{class: 'action'}、getAcitons(h、value、data) を返します)
 },
}

<テンプレート>
 <router-link :to="{ パス、クエリ: パラメータ }">{{値}}</router-link>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 小道具: {
  データ: オブジェクト、
  値: 文字列、
  クエリ: {
   タイプ: 関数、
   デフォルト: () => {
    戻る {
     パス： ''、
     ペイロード: {}
    }
   }
  },
 },
 計算: {
  //ルートパス
  パス（）{
   const { パス } = this.query(this.data)
   戻り経路
  },
  パラメータ(){
   const { ペイロード } = this.query(this.data)
   リターンペイロード
  },
 },
}
</スクリプト>

<テンプレート機能>
 <div v-html="props.format(props.value, props.data)" />
</テンプレート>

<テンプレート機能>
 <el-popover
  配置="トップスタート"
  幅="300"
  トリガー="ホバー"
  ポッパークラス="ポップオーバー"
  :content="props.value">
  <span slot="reference" class="popover-txt">{{props.value}}</span>
 </el-popover>
</テンプレート>
<スタイルスコープ>
.ポップオーバー-txt{
 オーバーフロー:非表示;
 テキストオーバーフロー:省略記号;
 空白:折り返しなし;
 表示: ブロック;
 カーソル: ポインタ;
}
</スタイル>

<テンプレート>
 <div style="margin: 20px;">
  <el-button type="primary" v-if="excelExport" @click="download">選択したテーブルデータを取得します</el-button>
  <テーブル:config="config" ref="テーブル" />
 </div>
</テンプレート>

<スクリプト>
'@/components/table' からテーブルをインポートします。

エクスポートデフォルト{
 コンポーネント:
  テーブル、
 },
 データ（） {
  戻る {
   設定: {
    ヘッダー: [
     {prop: 'contractCode', label: 'ビジネス番号', attrs: {width: 200, align: 'center'}},
     {prop: 'payeeAcctName'、label: '受取人口座名'、type: 'Link'、query: row => this.query(row)、attrs: {width: 260、align: 'right'}}、
     {prop: 'tradeAmt'、label: '支払額'、type: '通貨'},
     {prop: 'status'、label: '操作ステータス'、type: 'Enum'、Enum: {name: 'order'}}、
     {prop: 'statistic', label: 'Warning Statistics', type: 'Format', format: val => this.format(val)}, //表示するデータ形式をカスタマイズします {prop: 'reason', label: 'Reason', type: 'Popover'},
     {prop: 'payTime'、label: '支払時刻'、type: "日付"、format: 'yyyy-MM-dd hh:mm:ss'}, // フォーマットが設定されていない場合、デフォルトの日付フォーマットは yyyy/MM/dd です
     {prop: 'monitorStatus'、label: '現在の監視ステータス'、type: 'Enum'、Enum: {name: 'monitor'}}、
    ].concat(this.getActions())、
    //インターフェースを通じてリストデータを取得します - ここでのパラメーター p は、子コンポーネント loadData によって渡されるページングパラメーターです: p => request.post('permission/list', {...this.setParams(), ...p}),
    チェックボックスあり: true、
    選択可能: this.selectable、
    予約選択: false、
    rowKey: 行 => 行.id、
   },
   ステータス: "01",
   権限: ["handle", "pass", "refuse", "reApply", 'export']
  }
 },
 計算: {
  ハンドル（） {
   this.permission.some(n => n == "handle") を返します。
  },
  合格（） {
   this.permission.some(n => n == "pass") を返します。
  },
  拒否する（） {
   this.permission.some(n => n == "reject") を返します。
  },
  拒否する（） {
   this.permission.some(n => n == "refuse") を返します。
  },
  エクセルエクスポート(){
   this.permission.some(n => n == "handle") && this.permission.some(n => n == "export"); を返します。
  },
 },
 メソッド: {
  getActions(){
   戻り値: {prop: 'action'、名前: 'Operation'、タイプ: "Action"、値: [
    {ラベル: "表示"、クリック: データ => {console.log(data)}}、
    {ラベル: "処理"、クリック: データ => {}、フィルター: ({status}) => ステータス == 'CREATED' && this.handle}、
    {ラベル: "合格"、クリック: データ => {}、フィルター: ({status}) => status == '合格' && this.pass}、
    {ラベル: "拒否"、クリック: データ => {}、フィルター: ({ステータス}) => ステータス == '拒否' && this.reject}、
    {ラベル: "拒否"、クリック: データ => {}、フィルター: ({ステータス}) => ステータス == '作成済み' && this.refuse}、
   ]}
  },
  setParams(){
   戻る {
    名前: 'テスト'、
    ステータス: '01'、
    タイプ: 'CREATED'、
   }
  },
  クエリ(行){
   戻る {
    パス: '/otherElTable', // ルート パス
    ペイロード: {
     id: 行.id、
     タイプ: 'リンク'
    }
   }
  },
  フォーマット(val){
   str = '' とします。
   val.forEach(t => {
    str += '<span style="margin-right:5px;">' + t.total + '</span>';
   })
   str を返します。
  },
  選択可能({ステータス}){
   戻りステータス == "REFUSE" ? false : true
  },
  ダウンロード（）{
   console.log(this.$refs.table.getChecked())
  },
 },
};
</スクリプト>
<スタイル>
.action span{margin-right:10px;color:#359C67;cursor: ポインター;}
</スタイル>

 <表:config="config" ref="表">
  <テンプレート #統計="{行}">
   <div v-html="loop(row.statistic)"></div>
  </テンプレート>
  <テンプレート #支払先口座名義="{行}">
   {{row.支払先口座名}}
  </テンプレート>
  <テンプレート #tradeAmt="{行}">
   {{row.tradeAmt | 通貨}}
  </テンプレート>
  <テンプレート v-slot:reason="{row}">
   <テンプレート v-if="!row.reason">-</テンプレート>
   <el-popover
    v-else
    配置="トップスタート"
    幅="300"
    トリガー="ホバー"
    ポッパークラス="ポップオーバー"
    :content="row.reason">
    <span slot="reference" class="popover-txt">{{row.reason}}</span>
   </el-popover>
  </テンプレート>
  <テンプレート #payTime="{行}">
   {{row.payTime | date('yyyy-MM-dd hh:mm:ss')}}
  </テンプレート>
  <テンプレート #customize="{行}">
   {{カスタマイズ(行.カスタマイズ)}}
  </テンプレート>
  <テンプレート #opt="{行}">
   <div class="アクション">
    <span>表示</span>
    <span v-if="row.status == 'CREATED' && handle">ハンドル</span>
    <span v-if="row.status == 'PASS' && pass">合格</span>
    <span v-if="row.status == 'REJECT' && deny">拒否</span>
    <span v-if="row.status == 'REFUSE' && decline">拒否</span>
   </div>
  </テンプレート>
 </表>

<スクリプト>
'@/components/table' からテーブルをインポートします。

エクスポートデフォルト{
 コンポーネント:
  テーブル、
 },
 データ（）{
  戻る {
   設定: {
    ヘッダー: [
     {prop: 'contractCode', label: 'ビジネス番号', attrs: {width: 200, align: 'center'}},
     {prop: 'payeeAcctName', label: '受取口座名', attrs: {width: 260, align: 'right'}},
     {prop: 'tradeAmt', label: '支払額'},
     {prop: 'status'、label: '操作ステータス'、type: 'Enum'、Enum: {name: 'order'}}、
     {prop: '統計'、label: '早期警告統計'},
     {prop: 'payTime'、label: '支払い時間'},
     {prop: '理由', label: '理由'},
     {prop: 'monitorStatus'、label: '現在の監視ステータス'、type: 'Enum'、Enum: {name: 'monitor'}}、
     {prop: 'customize'、label: '表示をカスタマイズ'、type: 'Format'、format: val => this.customize(val)},
     {prop: 'opt'、label: '操作'},
    ]、
    ロードデータ: () => Promise.resolve({
     データ： [
      {id: 1、契約コード: ''、支払先口座名: '中国銀行上海支店'、取引額: '503869.265'、ステータス: '00'、支払時間: 1593585652530、
       統計:[
        {レベル: 3、合計: 5},
        {レベル: 2、合計: 7},
        {レベル: 1、合計: 20},
        {レベル: 0、合計: 0}
       ]、
       カスタマイズ: ['中国', '上海', '浦東新区']
      },
      {id: 2、契約コード: 'GLP-YG-B3-1111'、支払先口座名: '中国郵政上海支店'、取引額: '78956.85'、ステータス: '作成済み'、支払時間: 1593416718317、 
       理由: ポップオーバーのプロパティはツールチップのプロパティと非常に似ています。どちらも Vue-popper に基づいて開発されています。したがって、繰り返されるプロパティについては、ツールチップのドキュメントを参照してください。このドキュメントでは詳細には説明しません。 '、
      },
      {id: 3、契約コード: 'HT1592985730310'、支払先口座名: '中国招商銀行上海支店'、取引額: '963587123'、ステータス: 'PASS'、支払時間: 1593420950772、モニターステータス: '01'}、
      {id: 4、契約コード: 'pi239'、支払先口座名: '広州物流株式会社'、取引額: '875123966'、ステータス: '拒否'、支払時間: 1593496609363}、
      {id: 5、契約コード: '0701001'、支払先口座名: '建設銀行上海支店'、取引額: '125879125'、ステータス: '拒否'、支払時間: 1593585489177}、
     ]、
    }）、
   },
   権限: ["handle", "pass", "refuse", "reApply", 'export'],
  }
 },
 計算: {
  ハンドル（） {
   this.permission.some(n => n == "handle") を返します。
  },
  合格（） {
   this.permission.some(n => n == "pass") を返します。
  },
  拒否する（） {
   this.permission.some(n => n == "reject") を返します。
  },
  拒否する（） {
   this.permission.some(n => n == "refuse") を返します。
  },
  エクセルエクスポート(){
   this.permission.some(n => n == "handle") && this.permission.some(n => n == "export"); を返します。
  },
 },
 メソッド: {
  クエリ(行){
   戻る {
    パス: '/otherElTable', // ルート パス
    ペイロード: {
     id: 行.id、
     タイプ: 'リンク'
    }
   }
  },
  ループ(val){
   if(!val) が '-' を返す
   str = '' とします。
   val.forEach(t => {
    str += '<span style="margin-right:5px;">' + t.total + '</span>';
   })
   str を返します。
  },
  カスタマイズ(v){
   vを返す?v[0] + v[1] + v[2]: '-'
  }
 }
}
</スクリプト>

<表:config="config" ref="表">
  <テンプレート #payTime="{行}">
   {{row.payTime | date('yyyy-MM-dd hh:mm:ss')}}
  </テンプレート>
  <テンプレート #customize="{行}">
   {{カスタマイズ(行.カスタマイズ)}}
  </テンプレート>
  <テンプレート #opt="{行}">
   <div class="アクション">
    <span>表示</span>
    <span v-if="row.status == 'CREATED' && handle">ハンドル</span>
    <span v-if="row.status == 'PASS' && pass">合格</span>
    <span v-if="row.status == 'REJECT' && deny">拒否</span>
    <span v-if="row.status == 'REFUSE' && decline">拒否</span>
   </div>
  </テンプレート>
</表>

{prop: 'tradeAmt'、label: '支払額'、type: '通貨'},
{prop: 'payTime'、label: '支払い時間'、type: "日付"},