基于ElementUI封装可复用的表格组件

<template>
    <section class="ces-table-page">
        <!-- 表格操作按钮 -->
        <section class="ces-handle" v-if=\'isHandle\'>
            <el-button
                v-for=\'item in tableHandles\'
                :key=\'item.label\'
                :size="size || item.size"
                :type="item.type"
                :icon=\'item.icon\'
                @click="item.handle(that)">{{item.label}}
            </el-button>
        </section>
        <!-- 数据表格 -->
        <section class="ces-table">
            <el-table
                 :data=\'tableData\'
                 :size=\'size\'
                  height="100%"
                 style="width: 100%"
                 :border  =\'isBorder\'
                 @select=\'select\'
                @select-all=\'selectAll\'
                v-loading=\'loading\'
                :defaultSelections=\'defaultSelections\'
                ref="cesTable">
                // 复选框
                <!--<el-table-column v-if="isSelection" type="selection" align="center" ></el-table-column>-->
                // 序号
                <!--<el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="50"></el-table-column>-->
                <!-- 数据栏 -->
                <el-table-column
                     v-for="item in tableCols"
                     :key="item.id"
                     :prop="item.prop"
                     :label="item.label"
                     :width="item.width"
                     :align="item.align"
                     :render-header="item.require?renderHeader:null"
                >
                    <template slot-scope="scope" >
                        <!-- 按钮-->

                        <template v-if="item.type === \'Button\'">
                            <el-button v-for="btnItem in item.btnList" :key="btnItem.label"
                                    :disabled="btnItem.disabled && btnItem.disabled(scope.row)"
                                   :type="btnItem.type"
                                   :size="size || btnItem.size"
                                   :icon="btnItem.icon"
                                   @click="btnItem.handle(that,scope.row)">{{btnItem.label}}
                            </el-button>
                        </template>

                        <!-- html -->
                        <span v-if="item.type===\'html\'" v-html="item.html(scope.row)"></span>
                        <!-- 下拉框 -->
                        <el-select v-if="item.type===\'select\'" v-model="scope.row[item.prop]" :size="size || btn.size"  :props="item.props"
                                   :disabled="item.isDisabled && item.isDisabled(scope.row)"
                                   @change=\'item.change && item.change(that,scope.row)\'>
                        <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
                        </el-select>
                        <!-- 单选 -->
                        <el-radio-group v-if="item.type===\'radio\'" v-model="scope.row[item.prop]"
                                        :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                                        @change=\'item.change && item.change(that,scope.row)\'>
                            <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
                        </el-radio-group>
                        <!-- 复选框 -->
                        <el-checkbox-group v-if="item.type===\'checkbox\'" v-model="scope.row[item.prop]"
                                           :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                                           @change=\'item.change && item.change(that,scope.row)\'>
                            <el-checkbox v-for="ra in item.checkboxs" :label="ra.value" :key=\'ra.value\'>{{ra.label}}</el-checkbox>
                        </el-checkbox-group>
                        <!-- 评价 -->
                        <el-rate v-if="item.type===\'rate\'" v-model="scope.row[item.prop]"
                                 :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                                 @change=\'item.change && item.change(scope.row)\'></el-rate>
                        <!-- 开关 -->
                        <el-switch v-if="item.type===\'switch\'" v-model="scope.row[item.prop]" :size="size || btn.size"
                                   :active-value=\'item.values&&item.values[0]\'
                                   :inactive-value=\'item.values&&item.values[1]\'
                                   :disabled="item.isDisabled && item.isDisabled(scope.row)"
                                   @change=\'item.change && item.change(scope.row)\'></el-switch>
                        <!-- 图像 -->
                        <img v-if="item.type===\'image\'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)"/>
                        <!-- 滑块 -->
                        <el-slider v-if="item.type===\'slider\'" v-model="scope.row[item.prop]"
                                   :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                                   @change=\'item.change && item.change(scope.row)\'></el-slider>
                        <!-- 默认 -->
                        <span v-if="!item.type"
                              :style="item.itemStyle && item.itemStyle(scope.row)" :size="size || btn.size"
                              :class="item.itemClass && item.item.itemClass(scope.row)">{{(item.formatter && item.formatter(scope.row)) || scope.row[item.prop]}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <!-- 分页 -->
        <section class="ces-pagination"  v-if=\'isPagination\'>
            <el-pagination style=\'display: flex;justify-content: center;height: 100%;align-items: center;margin-top: 20px;\'
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
                   background
                   layout="total,sizes ,prev, pager, next, jumper"
                   :page-size="tablePage.pageSize"
                   :current-page="tablePage.pageNum"
                   :total="tablePage.total"
            ></el-pagination>
        </section>
    </section>
</template>

<script>

  export default {
    props:{
      that: { type: Object, default: this },
      // 表格型号：mini,medium,small
      size:{type:String,default:\'medium\'},
      isBorder:{type:Boolean,default:true},
      loading:{type:Boolean,default:false},
      // 表格操作
      isHandle:{type:Boolean,default:false},
      tableHandles:{type:Array,default:()=>[]},
      // 表格数据
      tableData:{ type:Array,default:()=>[]},
      // 表格列配置
      tableCols:{ type:Array,default:()=>[]},
      // 是否显示表格复选框
      isSelection:{type:Boolean,default:false},
      defaultSelections:{ type:[Array,Object], default:()=>null},
      // 是否显示表格索引
      isIndex:{type:Boolean,default:false},
      indexLabel: {type:String,default:\'序号\'},
      // 是否显示分页
      isPagination:{type:Boolean,default:true},
      // 分页数据
      tablePage:{ type:Object,default:()=>({pageSize:10,pageNum:1,total:0})},


    },
    data(){
      return {
      }
    },
    watch:{
      \'defaultSelections\'(val) {
        this.$nextTick(function(){
          if(Array.isArray(val)){
            val.forEach(row=>{
              this.$refs.cesTable.toggleRowSelection(row)
            })
          }else{
            this.$refs.cesTable.toggleRowSelection(val)
          }
        })
      }
    },
    methods:{
      // 表格勾选
      select(rows,row){
        this.$emit(\'select\',rows,row);
      },
      // 全选
      selectAll(rows){
        this.$emit(\'select\',rows)
      },
      //
      handleCurrentChange(val){
        this.tablePage.pageNum = val;
        this.$emit(\'CurrentChange\',val);
      },
      handleSizeChange(val) {
        this.tablePage.pageSize = val;
        this.$emit(\'SizeChange\',val);
      },

      // tableRowClassName({rowIndex}) {
      //     if (rowIndex % 2 === 0) {
      //         return "stripe-row";
      //     }
      //     return "";
      // }
      renderHeader(h,obj) {
        return h(\'span\',{class:\'ces-table-require\'},obj.column.label)
      },
    },
  }
</script>
<style>
    .ces-table-require::before{
        content:\'*\';
        color:red;
    }
    .el-table__row td {
        text-align: center;
    }
    .has-gutter tr th {
        text-align: center;
    }
    . el-table__body-wrapper {
        height: 500px !important;
    }
</style>

以上是封装好的表格组件  table.vue

使用该组件

<template>
  <div class="ces-main">
    <table-com
      :that=\'that\'
      size=\'small \'
      :isSelection=\'true\'
      :isIndex=\'true\'
      :isHandle=\'true\'
      :tableData=\'tableData\'
      :tableCols=\'tableCols\'
      :newBtnList="newBtnList"
      :isPagination=\'true\'
      :tablePage=\'pagination\'
      :longDatas="longDatas"
    >
    </table-com>

  </div>
</template>

<script>
  import tableCom from \'../../components/tableCompnment/tableForm\'
  export default {
    components : {
      tableCom
    },
    data () {
      return {
        that : this,
        // 查询表单
        searchData:{
          carNumber:null,
        },
        searchForm:[//搜索栏
          {type:\'Input\',prop:\'carNumber\',width:\'180px\',placeholder:\'请输入车牌\'},
        ],
        searchHandle:[//搜索按钮
          {label:\'查询\',icon:"el-icon-search",type:\'primary\',handle:()=>this.searchNews()},
        ],
        tableData : [
          {id:1,carNumber:\'粤B555\'},
          {id:2,carNumber:\'粤B555\'},
          {id:3,carNumber:\'粤B555\'},],// 表格数据
        tableCols:[// 表头
          {label:\'车牌\',prop:\'carNumber\'},
          {label:\'车辆信息\',type:\'longData\'},
          {label:\'下单时间\',prop:\'inputTime\'},
          {label:\'业务类型\',prop:\'checkType\'},
          {label:\'故障描述\',prop:\'note\'},
          {label:\'发动机缸数量\',prop:\'carCylinder\'},
          {label:\'当前操作人\',prop:\'operatorName\'},
          {label:\'操作\',type:\'button\',},
          {label:\'冻结\',type:\'Button\',btnList:[
              {type:\'danger\',label:\'冻结工单\',handle:(row,that)=>this.showRecord(row,that)},
            ]},
        ],
        newBtnList:[
          {id : 1,btnList:[
              {type:\'primary\',label:\'上传照片\',isShow:true, handle:(row,that)=>this.showEditTest(row,that)},
              {type:\'success\',label:\'完成\',isShow:false, handle:row=>\'\'}
            ]
          },
          {id : 2,btnList:[
              {type:\'primary\',label:\'上传照片\',isShow:true, handle:(row,that)=>this.showEditTest(row,that)},
              {type:\'success\',label:\'完成\',isShow:true, handle:row=>\'\'}
            ]
          },
          {id : 3,btnList:[
              {type:\'primary\',label:\'上传照片\',isShow:true, handle:(row,that)=>this.showEditTest(row,that)},
              {type:\'success\',label:\'完成\',isShow:true, handle:row=>\'\'}
            ]
          }
        ],


        longDatas : [],
        pagination:{//页数...
          pageSize:10,
          pageNum:1,
          total:0
        },
        orderPageShowOrgName: false,
      }
    },
  }
</script>

<style>
</style>

最后效果