Vue.jsは背景テーブルコンポーネントのカプセル化を管理します

<el-table :data="テーブルデータ" スタイル="幅: 100%">
   <el-table-column prop="date" label="日付" width="180" />
   <el-table-column fixed="right" label="操作" width="100">
      <テンプレート スロット スコープ="スコープ">
        <el-button @click="handleClick(scope.row)" type="text" size="small">表示</el-button>
        <el-button type="text" size="small">編集</el-button>
     </テンプレート>
   </el-table-column>
</el-table>

パラメータタイプ = {
  data: 配列, // データの読み込み: ブール値,
  選択表示: ブール値、
  列:配列 = [
    { 
      ラベル: 文字列、
      プロパティ: 文字列、
      フィルター: 関数、
      isSlot: ブール値、
      幅: 数値、
      テンプレート: 関数、
      btns: 配列 = [
        { 名前: 文字列,
          btnType: 文字列、
          クリックタイプ: 文字列、
          ルータータイプ: 文字列、
          url: 文字列、
          クエリ: 関数、
          btnClick: 機能
        }
      ]
    }
  ] 
}

'./FrTable/index' から TrTable をインポートします。

const コンポーネント = [TrTable]

const インストール = (Vue) => {
  コンポーネント.map(コンポーネント => {
    Vue.component(コンポーネント名、コンポーネント)
  })
}

if (typeof Window !== 'undefined' && window.Vue) {
  インストール(Window.Vue)
}

エクスポートデフォルト{
  インストール
}

'@/components/index' から globalComponents をインポートします。
Vue.use(グローバルコンポーネント)

<fr-テーブル />

<el-table :data="データ" border :loading="読み込み中">
        <!-- チェック -->
   <el-table-column v-if="selectionShow" type="selection" width="50" align="center" :reserve-selection="true" />
     <template v-for="(item, index) 列内">
        <el-table-column :key="index" v-bind="item">
            <!-- カスタム ヘッダー -->
          <テンプレート v-if="item.customHeader" slot="ヘッダー">
              <スロット:name="item.headerProp" />
          </テンプレート>
          <テンプレート スロット スコープ="スコープ">
               <span v-html="handleFilter(アイテム、スコープ行、アイテムプロパティ)" />
          </テンプレート>
        </el-table-column>
     </テンプレート>
 </el-table>

ハンドルフィルター(アイテム、値、プロパティ) {
  値 = val[prop]とする
  if (item.templet) 値 = item.templet(val)
  item.filter を返します? this.$options.filters[item.filter](val[prop]) : value
},

<テンプレート スロット スコープ="スコープ">
   <!-- カスタムコンテンツ -->
   <スロット
      v-if="item.isSlot"
      :name="アイテム.prop"
      :row="スコープ.row"/
   >
</テンプレート>

<テンプレート v-if="item.btns">
   <el-ボタン
     v-for="(btn, i) が item.btns 内にあります"
     :key="i"
    クラス="mr_10"
    :size="btn.mini ? btn.mini: 'small'"
    :type="btn.type ? btn.type: 'プライマリ'"
    @click="btnClickfunc(btn, スコープ.行)"
  >
     {{ btn.name }}
  </el-button>
</テンプレート>

btnClickfunc(列、行) {
      定数パス = {
        [column.routerType]: column.url,
        クエリ: column.query ? column.query(row): ''
      }
      （column.clickType === 'ルーター'）の場合{
        this.$router.push(パス)
      } そうでない場合 (column.clickType === 'router_blank') {
        const ルートデータ = this.$router.resolve(パス)
        window.open(routeData.href, '_blank')
      } そうでない場合 (column.clickType === 'btnClick') {
        column.btnClick(行)
      } それ以外 {
        this.$emit('btnClickFunc', { 列: 列、行: 行 })
      }
},

  // データ： {
      タイプ: 配列、
      必須: true
    },
    // テーブルヘッダーパラメータ列: {
      タイプ: 配列、
      必須: true
    },
    読み込み中:
      タイプ: ブール値、
      デフォルト: false
    },
    //複数選択ボックス選択表示: {
      タイプ: ブール値、
      デフォルト: false
    },

<fr-テーブル
      ref="mt"
      :loading="読み込み中"
      :data="リスト"
      :columns="列"
    >
</fr-table>

<el-ページネーション
  スタイル="margin-top:40px;"
  背景
  レイアウト="前へ、ページャ、次へ"
  :page-size="ページ制限"
   :total="合計"
   :current-page="現在のページ"
   @current-change="現在の変更を処理する"
/>
現在の変更を処理する(val) {
   コンソール.log(値)
}

合計: 数、
ページ制限: 数値、
現在のページ: 番号、

<el-ページネーション
  スタイル="margin-top:40px;"
  背景
  レイアウト="前へ、ページャ、次へ"
  :page-size="ページ制限"
  :total="合計"
  :current-page="現在のページ"
  @current-change="現在の変更を処理する"
/>

現在の変更を処理する(val) {
   this.$emit('currentChange', val)
}