vue封装element组件库中的封装通用table，是否启用多选、按钮及是否分页,样式可自定义设置

页面效果

生成的通用table效果

 

封装的组件4个重要变量

columns：传入需要显示的列数组

options：设置table属性样式数组

operates：行数据操作按钮数组

pagination：分页数组

 

页面

<template>
  <div class="order_edit_content">
      <div>
        <el-row v-loading="loading">
          <el-form :model="formData" :rules="rules" ref="formData" label-width="200px">
            <!--客户名称-->
            <el-form-item :label="$t('basic.customerName')+' :'"  prop="customerName">
              <label>{{formData.customerName}}</label>
            </el-form-item>
            <!--订单编号-->
            <el-form-item :label="$t('buy.orderNo')+' :'" prop="orderNo">
              <el-input style="width: 450px" v-model="formData.orderNo" maxlength="50">
              </el-input>
            </el-form-item>
            <!--购买日期-->
            <el-form-item :label="$t('buy.buyDate')+' :'" prop="buyDate">
              <el-date-picker clearable
                              style="width: 450px"
                              v-model="formData.buyDate"
                              type="date">
              </el-date-picker>
            </el-form-item>
            <!--购买产品-->
            <el-form-item :label="$t('buy.buyProduct')+' :'" prop="buyProduct">
              <el-input style="width: 450px" v-model="formData.buyProduct" maxlength="50">
              </el-input>
            </el-form-item>
            <!--已选规格-->
            <el-form-item :label="$t('buy.selectedProduct')+' :'" prop="selectedTableList">
              <ITableShowData
                :itableData="itableData"
                :total="total"
                :otherHeight="otherHeight"
                :options="options"
                :pagination="pagination"
                :columns="columns"
                :operates="operates"
                @handlePageSizeChange="handlePageSizeChange"
                @handlePageIndexChange="handlePageIndexChange">
              >
              </ITableShowData>
            </el-form-item>
            <!--备注-->
            <el-form-item :label="$t('buy.remark')+' :'" prop="remark">
              <el-input type="textarea"
                        v-model="formData.remark"
                        :autosize="{ minRows: 4, maxRows:4 }"
                        maxlength="255"
                        style="width: 698px;"
                        :placeholder="$t('contact.note')"
                        show-word-limit
              ></el-input>
            </el-form-item>
          </el-form>
          <div style="width: 100%;margin: 0 auto auto 140px;text-align: center">
            <span slot="footer" class="dialog-footer">
              <el-button size="medium" type="primary" @click="confirmOrder" style="width: 110px">{{$t('cus.confirm')}}</el-button>
              <el-button size="medium" @click="closePage" style="width: 110px">{{$t('cus.cancel')}}</el-button>
            </span>
          </div>
        </el-row>
      </div>
  </div>
</template>

<script>
  import ITableShowData from "../../../componentPackaging/table/ITableShowData"
  export default {
      name: "OrderEdit",
      components:{
          ITableShowData,
      },
      data() {
          let checkPhoneFormat = (rule, value, callback) => {
              if (value) {
                  if (this.validPhoneFormat(value)) {
                      this.formData.phoneNum = value
                  } else {
                      return callback(new Error(this.$t('contact.rules.errorTip.phoneNumFormatError')));
                  }
              }
          };
          return {
              itableData: [],
              formData: {
                  customerId: '',
                  customerName: 'xxxxxxx',
                  orderNo: '',
                  buyDate: '',
                  buyProduct: '',
                  remark: '',
                  selectedTableList: [],
              },
              loading: false,
              orderDetail: {},
              validateIsEdit: false,
              rules: {
                  buyProduct: [
                      {required: true, message: '请选择产品规格'},
                      /*{required: true, message: this.$t('contact.rules.phoneNum')},
                      {validator: checkPhoneFormat, trigger: 'blur'}*/
                  ],
              },
              total: 0,
              otherHeight: 350, //页面除table之外，其他组件所需高度
              columns: [// 需要展示的列
                  {
                      prop: 'specName',
                      label: '产品名称',
                      align: 'center',
                      width: "170"
                  },
                  {
                      prop: 'specType',
                      label: '规格',
                      align: 'center',
                      width: "170"
                  },
                  {
                      prop: 'quantity',
                      label: '购买数量',
                      align: 'center',
                      width: "120"
                  },
                  {
                      prop: 'amount',
                      label: '金额总计',
                      align: 'center',
                      width: "120"
                  },
                  {
                      prop: 'profit',
                      label: '利润',
                      align: 'center',
                      width: "120"
                  },
              ],
              operates: { // 操作按钮组
                  label: '操作',
                  align: 'center',
                  width: 250,
                  fixed: 'right',
                  list: []
              },
              pagination: { // 分页参数
                  pageIndex: 1,
                  pageSize: 10,
              },
              options: {  // table 的参数
                  stripe: true,   // 是否为斑马纹 table
                  loading: false,   // 是否添加表格loading加载动画
                  highlightCurrentRow: true, // 是否支持当前行高亮显示
                  mutiSelect: false,   // 是否支持列表项选中功能
                  fit: false ,  //列的宽度是否自撑开
                  showHeader: true,  //显示表头
                  border: true,
                  divWidth: '700px',
                  tableWidth: '720px',
                  align: 'center',
                  enablePage: true,  //开启分页
              },
          }
      },
      created() {
          //只会第一次进入页面时触发一次
          if ( this.$route.params.orderRow === undefined || this.$route.params.orderRow === null || this.$route.params.orderRow ==='') {
              this.validateIsEdit = false
          }else {
              this.validateIsEdit = true
              Object.assign(this.orderDetail, this.$route.params.orderRow);
              this.getOrderDetailById(this.orderDetail.orderNumber)
              //form表单赋值

          }

      },
      activated() {
          //页面切换进来需要执行的事件在这里写
          if ( this.$route.params.orderRow === undefined || this.$route.params.orderRow === null || this.$route.params.orderRow ==='') {
              console.log("activated参数:",this.$route.params.orderRow)
              console.log("是否编辑跳转的:",this.validateIsEdit)
          }

      },
      methods: {
          getOrderDetailById(orderId) {
              //查询最新订单信息
              console.log("订单id号:",orderId)
          },
          //确定
          confirmOrder(){

          },
          //取消
          closePage(){

          },
          // 切换每页显示的数量
          handlePageSizeChange (pagination) {
              console.log("切换每页显示的数量")
              console.log(pagination)
              this.pagination = pagination
          },
          // 切换页码
          handlePageIndexChange (pagination) {
              console.log("切换页码")
              console.log(pagination)
              this.pagination = pagination
          },
      },
  }
</script>

<style  lang="scss" >
  .order_edit_content {
    width: 50%;
    /*边框颜色*/
/*    .el-input--small {
      font-size: 13px;
      !*border: 0.1px solid #A2A2A2;*!
      border: 0.1px solid #666666;
      border-radius: 5px;
    }*/
    /*.el-dialog__header {
      .el-dialog__title {
        font-size: 15px;
      }
      background-color: #efefef;
      padding: 10px 10px 10px 10px;
      .el-dialog__headerbtn {
        top: 10px;
      }
    }*/
    /*日期图标*/
    .el-input__prefix {
      left: 93%;
    }
  }

  #area-region {
    width: 820px;
    height: 500px;
    border: 1px solid #C0C4CC;
    padding: 5px;
    overflow-y: auto;
  }

  /*.el-tree-node {*/
  /*  width: 260px;*/
  /*  float: left;*/
  /*}*/

  .el-tree-node__children .el-tree-node {
    width: auto;
    float: left;
  }
</style>

 

table封装通用组件

<template>
  <div class="table_component_content">
    <div :style="'width:' + options.divWidth + ';text-align:' + options.align">
      <el-table
        id="iTable"
        v-loading.iTable="options.loading"
        :data="itableData"
        :max-height="height"
        :stripe="options.stripe"
        :fit="options.fit"
        :cell-style="{'padding': '0px'}"
        :showHeader="options.showHeader"
        ref="mutipleTable"
        :style="'width:' + options.tableWidth"
        tooltip-effect = "dark"
        :border="options.border">
        <!--region 选择框-->
        <el-table-column v-if="options.mutiSelect" type="selection" >
        </el-table-column>
        <!--endregion-->

        <!--region table列遍历-->
        <template v-for="(column, index) in columns">
          <el-table-column :prop="column.prop"
                           :label="column.label"
                           :align="column.align"
                           :width="column.width">
            <template slot-scope="scope">
              <template v-if="!column.render">
                <template v-if="column.formatter">
                  <span v-html="column.formatter(scope.row, column)"></span>
                </template>
                <template v-else>
                  <span>{{scope.row[column.prop]}}</span>
                </template>
              </template>
              <template v-else>
                <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
              </template>
            </template>
          </el-table-column>
        </template>
        <!--endregion-->

        <!--region 按钮操作组-->
        <el-table-column ref="fixedColumn" :label="operates.label" :header-align="operates.align" :width="operates.width" :fixed="operates.fixed"
                         v-if="operates.list.length > 0">
          <template slot-scope="scope">
            <!-- <div class="operate-group">-->
            <div>
              <template v-for="(btn, key) in operates.list">
                <div  v-if="btn.show(scope.$index,scope.row)">
                  <el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled(scope.$index,scope.row)"
                             :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
                  </el-button>
                </div>
              </template>
            </div>
          </template>
        </el-table-column>
        <!--endregion-->
      </el-table>
      <!--endregion-->

      <!--region 分页-->
      <template v-if="options.enablePage">
        <el-pagination
          style="float: right;margin-right: 2%"
          @size-change="handlePageSizeChange"
          @current-change="handlePageIndexChange"
          :current-page.sync="tableCurrentPagination.pageIndex"
          :page-size="tableCurrentPagination.pageSize"
          :page-sizes="tableCurrentPagination.pageArray"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </template>
      <!--endregion-->
    </div>
  </div>
</template>

<script>

    const _pageArray = [5,10, 20, 30, 40, 50, 100] // 每页展示条数的控制集合
    export default {
        name: "ITableShowData",
        props: {// 数据列表
            itableData: {
                type: Array,
                default: [] // prop:表头绑定的地段，label：表头名称，align：每列数据展示形式（left, center, right），width:列宽
            },
            columns: {// 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
                type: Array,
                default: []
            },
            operates: {
                // width:按钮列宽，fixed：是否固定（left,right）,按钮集合 === label: 文本，
                // type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法
                type: Object,
                default: {}
            },
            total: {// 总数
                type: Number,
                default: 0
            },
            pagination: { // 分页参数 === pageSize:每页展示的条数，pageIndex:当前页，pageArray: 每页展示条数的控制集合，默认 _page_array
                type: Object,
                default: null
            },
            otherHeight: {  // 计算表格的高度
                type: Number,
                default: 320
            },
            options: {  // table 表格的控制参数
                type: Object,
                default: {
                    stripe: false, // 是否为斑马纹 table
                    loading: false, // 是否添加表格loading加载动画
                    highlightCurrentRow: false, // 是否支持当前行高亮显示
                    mutiSelect: false, // 是否支持列表项选中功能
                    fit: false ,  //列的宽度是否自撑开
                    showHeader: false,  //显示表头
                    border: false,
                    tableWidth: '720px',
                    divWidth: '720px',
                    align: 'center',
                    enablePage: true,   //开启分页
                }
            }
        },
        components: {
            expandDom: {
                functional: true,
                props: {
                    row: Object,
                    render: Function,
                    index: Number,
                    column: {
                        type: Object,
                        default: null
                    }
                },
                render: (h, ctx) => {
                    const params = {
                        row: ctx.props.row,
                        index: ctx.props.index
                    }
                    if (ctx.props.column) params.column = ctx.props.column
                    return ctx.props.render(h, params)
                }
            }
        },
        data() {
            return {
                orderListPageData: [],
                screenHeight: document.body.clientHeight,
                selectedIds: [],
                starColors: ['#606266', '#606266', '#606266'],
                loading: false,
                pageIndex: 1,
                tableCurrentPagination: {
                    pageIndex: 1,
                    pageSize: 10,
                    pageArray: _pageArray,
                },
            }
        },
        watch: {
        },
        created() {

        },
        activated() {

        },
        mounted() {
            // 窗口或页面被调整大小时触发事件
            window.onresize = () => {
                // 获取body的高度
                this.screenHeight = document.body.clientHeight
            }
            this.verifyIsNeedPagination()
        },
        computed: {
            // 根据当前窗口高度动态设置el-table的显示高度，避免出现不必要的滚动条
            // 以及由于el-table内容过长而导致的分页器无法显示在当前看到的界面
            // X的值为页面除了el-table以外，el-table的其他兄弟标签的高度和（本例中为el-form与el-pagination的高度和）
            // X的值可以不用特意获取，写个大概值，然后再调。
            getTableHeight() {
                return this.screenHeight - 350
            },
            // 计算table高度
            height () {
                //return this.screenHeight - 350
                return this.screenHeight - this.otherHeight
            }
        },
        methods: {
            verifyIsNeedPagination(){// 判断是否需要分页,不分页可初始化  tableCurrentPagination：{}
              /*  if (this.pagination && !this.pagination.pageSizes) {
                    this.pagination.pageArray = _pageArray // 每页展示条数控制
                }*/
                this.tableCurrentPagination = this.pagination || {
                    pageIndex: 1,
                    pageSize: 10,
                }
            },
            getRowKeys(row) {
                return row.id;
            },
            // 切换每页显示的数量
            handlePageSizeChange(currentPageSize) {
                this.tableCurrentPagination = {
                    pageIndex: 1,
                    pageSize: currentPageSize,
                }
                this.$emit('handlePageSizeChange', this.tableCurrentPagination)
            },
            // 切换页码
            handlePageIndexChange(currentPageIndex) {
                this.tableCurrentPagination.pageIndex = currentPageIndex
                this.$emit('handlePageIndexChange', this.tableCurrentPagination)
            },
        }

    }
</script>


<style lang="scss" scope>
  .table_component_content {
    /*width: 700px;*/
    /*text-align: center;*/
    //表头样式
/*    .el-table__header {
      height: 25px;
      background: #EEEEEE;
    }*/
    .el-table__expanded-cell{
      /*子table左移无间隙*/
      padding: 0px 0px 0px 0px;
      font-size: 14px;
    }
    .el-table--border {
      border: 1px solid #c0c4cc;
    }
    /*.el-table th>.cell {
      margin-left: 20px;
    }*/
    /*    .el-table td, .el-table th.is-leaf {
          border-bottom: 1px solid #c0c4cc;
        }*/

    .el-table thead th {
      //background: #D3D3D3;
      background: #f2f2f2;
      line-height: 25px;
      padding: 0px;
    }
    .top-column-lab {
      //background: #D3D3D3;
      text-align: center;
      font-size: 14px;
      //line-height: 30px;
      height: 25px;
      background: #EEEEEE;
    }

    .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
      //table头边框
      //border-right: 1px solid #c0c4cc;
      border-right: 1px solid #dadada;
    }
    .el-table__body-wrapper {
      //滑动条
      overflow-x: hidden;

    }

    .el-table th > .cell {
      font-weight: 400;
      color: #333333;
      margin-top: 4px;
    }
  }
</style>

 

 

参考：https://juejin.im/post/5a6941dc518825732258e321#heading-4