一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録

<!-- pro-table.vue -->
<テンプレート>
  <div>
    <el-テーブル
      :data="テーブルデータ"
      スタイル="幅: 100%"
      :stripe="テーブルタイトル.stripe"
      :border="テーブルタイトル.border"
      :fit="テーブルタイトル.fit"
      :highlight-current-row="テーブルタイトル.highlightCurrentRow"
      @selection-change="ハンドル選択変更">
      <!--表の最初の列-->
      <el-テーブル列
        :type="firstTableCol.type"
        :width="最初の表の列の幅"
        v-if="firstTableCol.select"
      >
      </el-table-column>
      <!-- 表内の他の列 -->
      <el-table-column v-for="(value,index) in tableCol" :key="index"
                       :prop="値.prop"
                       :label="値.ラベル"
                       :width="値.幅 || 180">
        <テンプレート スロット スコープ="スコープ">
          <テンプレート v-if="!value.render">
            <テンプレート v-if="値.フォーマッタ">
              {{ value.formatter(scope.row, value) }}
            </テンプレート>
            <テンプレート v-else-if="value.getImgurl">
              <el-image :src="value.getImgurl(scope.row, value)" スタイル="幅: 70px; 高さ: 70px"
                        :preview-src-list="value.previewSrcList ? value.previewSrcList(scope.row, value) : value.getImgurl(scope.row, value).split(',')"/>
            </テンプレート>
            <テンプレート v-else>
              {{ スコープ.行[値.プロパティ] }}
            </テンプレート>
          </テンプレート>
          <!--拡張DOM-->
          <テンプレート v-else>
            <テーブル:key="`cus${index}`":render="value.render":param="scope.row"></テーブル>
          </テンプレート>
        </テンプレート>
      </el-table-column>
      <!--基本操作-->
      <el-table-column label="操作">
        <テンプレート スロット スコープ="スコープ">
          <el-button type="text" v-for="(value,index) in 演算子" @click="value.click(scope.row, value)" :key="index">
            {{ 値.テキスト }}
          </el-button>
        </テンプレート>
      </el-table-column>
    </el-table>
    <!--ページネーションプラグイン-->
    <el-ページネーション
      v-show="合計>0"
      :total="合計"
      :page-size.sync="ページサイズ"
      :current-page.sync="現在のページ"
      :ページサイズ="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="現在の変更を処理する"
      @size-change="ハンドルサイズ変更"
      v-bind="$attrs">
    </el-pagination>
  </div>
</テンプレート>

<スクリプト>
// レンダリング関数 './table' から Table をインポート
エクスポートデフォルト{
  コンポーネント: {テーブル},
  小道具: {
    テーブルタイトル: {
      タイプ: オブジェクト、
      デフォルト： {
        ストライプ: 偽、
        境界: 偽、
        フィット: 真、
        現在の行をハイライト: false
      }
    },
    最初のテーブル列: {
      タイプ: オブジェクト、
      デフォルト： {
        選択: false、
        幅: 55,
        タイプ: '選択'
      }
    },
    テーブル列: {
      タイプ: 配列、
      デフォルト： []
    },
    テーブルデータ: {
      タイプ: 配列、
      デフォルト： []
    },
    オペレーター：
      タイプ: 配列、
      デフォルト： []
    },
    合計：
      タイプ: 数値、
      デフォルト: 0
    },
    ページ: {
      タイプ: 数値、
      デフォルト: 1
    },
    制限: {
      タイプ: 数値、
      デフォルト: 10
    },
    自動スクロール: {
      タイプ: ブール値、
      デフォルト: true
    }
  },
  計算: {
    現在のページ: {
      得る （） {
        このページを返す
      },
      設定(値) {
        this.$emit('update:page', val)
      }
    },
    ページサイズ: {
      得る （） {
        this.limitを返す
      },
      設定(値) {
        this.$emit('update:limit', val)
      }
    }
  },
  データ （） {
    戻る {
    }
  },
  メソッド: {
    // テーブル選択ボックスをリッスンする handleSelectionChange (selection) {
      //親コンポーネントに対応するhandleSelectionChangeメソッドを呼び出す
      this.$emit('handleSelectionChange', 選択)
    },
    // ページごとに監視するレコード数（制限）
    ハンドルサイズ変更 (制限) {
      this.$emit('ページネーション', {ページ: this.currentPage, 制限: limit})
      （this.autoScroll）の場合{
        スクロール(0, 800)
      }
    },
    // 現在のページを監視する (ページ)
    handleCurrentChange (ページ) {
      this.$emit('pagination', {page: page, limit: this.pageSize})
      （this.autoScroll）の場合{
        スクロール(0, 800)
      }
    }
  }
}
</スクリプト>
<スタイルスコープ>
</スタイル>

// テーブル.js
エクスポートデフォルト{
  小道具: {
    与える： {
      タイプ: 関数
    },
    パラメータ: {
      タイプ: オブジェクト
    }
  },
  レンダリング(h) {
    this.render(h, this.param) を返します。
  }
}

<テンプレート>
  <div>
    <!--
        @Custom event="親コンポーネントメソッド"、子コンポーネントでは、this.$emit('カスタムイベント名') が親コンポーネントイベントをトリガーします。
        ref="proTable"、サブコンポーネントにマークされ、サブコンポーネントインスタンスを指します -->
    <proTable ref="proTable" :tableTitle="テーブルタイトル" :tableCol="テーブル列" :tableData="テーブルデータ" :operator="演算子"
        :firstTableCol="最初のテーブル列"
        @handleSelectionChange="ハンドル選択変更"
        :total="合計" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList"/>

  </div>
</テンプレート>

<スクリプト>
'./pro-table' から proTable をインポートします。

エクスポートデフォルト{
  コンポーネント:
    プロテーブル
  },
  データ（） {
    戻る {
      クエリパラメータ: {
        ページ: 1,
        制限: 10,
      },
      タイプ: '成功'、
      合計: 50,
      // element-ui tableTitle でテーブル属性を設定する: {
        'ストライプ': true、
        "現在の行をハイライト": true
      },
      // テーブル列を設定する tableCol: [
        { プロパティ: '日付'、ラベル: '日付'},
        { プロパティ: '名前', ラベル: '名前'},
        { prop:'address',label:'住所',width: 300},
        { prop:'src',label:'画像',  
        getImgurl: (行、列、セル値) => { this.getImgurl(行) を返します}, 
        previewSrcList: (行、列、セル値) => {this.listImgUrl(行) を返します}},
        { prop:'sex', label:'性別',  
        フォーマッタ: (row, col, cellValue) => {return this.sexFormatter(row)}},
        { prop:'src',label:'画像',  
        getImgurl: (行、列、セル値) => { this.getImgurl(行) を返します}},
        { prop:'text',label:'function', render: (h, params) => {return this.render(h, params)}}
      ]、
      // 基本的なテーブル操作演算子: [
        {'text':'詳細'、クリック: (row, col, cellValue) => {return this.getInfo(row)}},
        {'text':'削除'、クリック: (row, col, cellValue) => {return this.delInfo(row)}}、
        {'text':'編集'、クリック: (row, col, cellValue) => {return this.editInfo(row)}}、
      ]、
      // シミュレーションデータテーブルデータ: [
        {
          日付: '2016-05-02'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1518号'、
          性別: 0,
          画像:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-193cbb243dc14d3a016caaa54ba02837_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628435704&t=deb5584cb9ff53fe6977f14a5e0755bb'
        }, {
          日付: '2016-05-04'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1517号'、
          性別: 1,
          画像:'https://pic1.zhimg.com/80/v2-894ab624807fd4cfa33dd4e42cc90ac8_720w.jpg?source=1940ef5c'
        }, {
          日付: '2016-05-01'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1519号'、
          性別: 0,
          画像:'xx.jpg'
        }, {
          日付: '2016-05-03'、
          名前: 王小湖、
          住所: '上海市普陀区金沙江路1516号'、
          性別: 1,
          画像:'xx.jpg'
        }],
      最初のテーブル列: {
        '選択': 真、
        'タイプ': '選択'
      }
    }
  },
  メソッド: {
    getInfo(val) {
      // 親メソッドをトリガーします console.log("詳細を取得",val)
    },
    delInfo(値) {
      // 親メソッドをトリガーします console.log("delete information",val)
    },
    編集情報(val) {
      // 親メソッドをトリガー console.log("編集情報",val)
    },
    getImgurl(val) {
      コンソールログ(val.img)
      val.img を返す
    },
    セックスフォーマッタ(val) {
      val.sex === 0 を返します? '男性' : '女性'
    },
    選択変更処理(val) {
      console.log("選択ボックスを聴く",val)
    },
    getList(クエリパラメータ) {
      console.log("親メソッド",queryParams)
    },
    リストImgUrl() {
      配列 = [] とします。
      配列.push("https://pic1.zhimg.com/80/v2-894ab624807fd4cfa33dd4e42cc90ac8_720w.jpg?source=1940ef5c");
      配列.push("https://cdn.pixabay.com/photo/2021/07/01/21/20/girl-6380331_960_720.jpg");
      配列を返します。
    },
    レンダリング(h, パラメータ) {
      h('span', null, '私はレンダリングコンポーネントです') を返します
    }
  }
}
</スクリプト>