封装vue element-ui的table

1、效果：（有图片、下划线[点击跳转]、分页、固定列、序号、超出列宽度隐藏并且文字提示。。。）


2、实现：（代码演示的是第一张图）
a.组件

<template>
  <div class="table_list">
    <el-table ref="table" :border="tableData.border?true:false" :data="tableData.data" stripe fit :size="tableData.size ? tableData.size : ''" style="width: 100%" :row-key="(row)=>{ return row.id}" highlight-current-row tooltip-effect="dark"  @selection-change="currentChange">
      <el-table-column v-if="tableData.isCheck" type="selection" width="40" align="left"></el-table-column>
      <el-table-column v-for="column in tableData.columns" show-overflow-tooltip :key="column.key" :label="column.label" :width="column.width" :prop="column.key" :sortable="column.sortable" :align="column.align || 'left'" :fixed="column.fixed">
        <template slot-scope="scope">
          <!-- 序号 -->
          <span v-if="column.key === 'num'">{{scope.$index+1}}</span>
          <!-- 图片 :src="scope.row[column.key]?scope.row[column.key]:localUrl"-->
          <span v-else-if="column.type === 'img'">
            <!-- <img alt v-for="(item,index) in column.imgs" :key="index" :src="item ? item : localUrl" :width="column.Iwidth ? (column.Iwidth +'px') : '60px'" :max-height="column.Iheight ? (column.Iheight+'px') : '60px'" /> -->
             <img alt  :src="scope.row[column.key]?scope.row[column.key]:localUrl" :width="column.Iwidth ? (column.Iwidth +'px') : '60px'" :max-height="column.Iheight ? (column.Iheight+'px') : '60px'" />
          </span>
          <!-- 按钮-->
          <span v-else-if="column.type === 'btn'">
            <el-button @click="tableData.btn(scope.row) || ''" type="text" size="small">
              {{scope.row[column.key]}}
            </el-button>
          </span>
          <!-- 链接 @click="scope.row[column.event](scope.row)" -->
          <span v-else-if="column.type === 'link'" @click="column.event && column.event(scope.row, column.key, scope.row[column.key])" style="cursor: pointer;text-decoration: underline;" :style="{color:column.color ? column.color : ''}">
            {{scope.row[column.key]}}
          </span>
          <span v-else-if="column.type === 'elink'" @click="handleLink(scope.row, column.key, scope.row[column.key])" style="cursor: pointer;text-decoration: underline;" :style="{color:column.color ? column.color : ''}">
            {{scope.row[column.key]}}
          </span>
          <!--Tooltip 文字提示-->
          <el-tooltip v-else-if="column.type === 'tooltip'" effect="dark" :content="scope.row.serviceArea" placement="top-start">
            <el-button type="text">{{scope.row[column.key]}}</el-button>
          </el-tooltip>
          <!-- 操作按钮 @click="btn.event && btn.event(scope.row,scope.$index) || ''" -->
          <div v-else-if="column.key === 'operationsModel'" class="opration-btn">
            <el-button v-for="(btn,btnIndex) in tableData.btnList" v-show="!btn.isShow || (btn.isShow && btn.isShow(scope.row))" :key="btnIndex" :size="btn.size || 'mini'" :type="btn.type" :class="btn.mode || ''" @click="btn.event && btn.event(scope.row) || ''" :disabled="typeof (btn.disabled) === 'string' ? btn.disabled : (typeof btn.disabled === 'function' ? btn.disabled({
              data : scope.row
              }) : false)">
              <i :class="btn.btnClass"></i>
              {{btn.label}}
            </el-button>
          </div>
          <span v-else>{{String(scope.row[column.key]) ? (column.event ? column.event(scope.row[column.key]) : scope.row[column.key]) : '无'}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="tableData.page" layout="total, sizes, prev, pager, next, jumper" 
    :current-page.sync="tableData.page.currentPage" :page-sizes="[10, 20, 30, 50]" 
    :page-size="tableData.page.pageSize" 
    :total="tableData.page.total" @size-change="tableData.page.handleSizeChange"
     @current-change="tableData.page.handleCurrentChange" class="page_list"></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableData: Object
  },
  data() {
    const that = this
    return {
      localUrl: require('../assets/image/xo.jpg'),
    }
  },
  methods: {
    handleLink(row, key, value) {
      this.$emit('handleLink', row, key, value)
    },
     currentChange(data) {
      this.$emit('currentChange', data)
    },
    // 数据转换
    // formatValue (column) {
    //   console.log(column, 'column')
    //   if (column.format) {
    //     return column.format(column)
    //   } else {
    //     return column[column.key]
    //   }
    // }
  }
}
</script>

<style lang="scss">
.table_list {
  .primary {
    color: #409eff;
  }
  .success {
    color: #67c23a;
  }
  .info {
    color: #909399;
  }
  .warning {
    color: #e6a23c;
  }
  .danger {
    color: #f56c6c;
  }
}
.page_list {
  margin-top: 20px;
  text-align: right;
  display: inline-block;
  // width: 100%;
}
.opration-btn {
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: flex-start;
  // align-content: space-between;
}
</style>

页面引入

import TabelList from '@c/Table'

components: { TabelList }

<TabelList :tableData="tableData"></TabelList>

数据：（data就是数据）

tableData: {
        border: true,
        isCheck: true,
        loading: true,
        data: [],
        columns: [
          {
            key: 'agCode',
            label: '信息编号',
            width: 160
          },
          {
            key: 'siteName',
            label: '网点名称',
            width: 120
          },
          {
            key: 'agName',
            label: '农产名称',
            width: 120
          },
          {
            key: 'expectedTime',
            label: '预上市时间',
            width: 160
          },
          {
            key: 'showPrice',
            label: '预售单价（￥）',
            width: 120,
            event: val => parseFloat((val + "").replace(/[^\d\.-]/g, "")).toFixed(2) + ""
          },
          {
            key: 'yield',
            label: '预计产量',
            width: 100
          },
          {
            key: 'showPrePrice',
            label: '预采价格（¥）',
            width: 120,
            event: val => parseFloat((val + "").replace(/[^\d\.-]/g, "")).toFixed(2) + ""
          },
          {
            key: 'preAmount',
            label: '预采数量',
            width: 120
          },
          {
            key: 'preQty',
            label: '剩余数量',
            width: 120
          },
          {
            key: 'prePurchasingDate',
            label: '预采时间',
            width: 120
          },
          {
            key: 'opTime',
            label: '操作时间',
            width: 160
          },
          {
            key: 'statusName',
            label: '协议状态',
            width: 100
          },
          {
            key: 'gstatusName',
            label: '商品状态' ,
            width: 100
          },
          {
            key: 'presellAmount',
            label: '预售数量',
            width: 120
          },
          {
            key: 'operationsModel',
            label: '操作',
            align: 'left',
            width: 200,
            fixed: 'right'
          }
        ],
        btnList: [
          {
            label: '详情',
            type: 'text',
            isShow: false,
            event: row => {this.handleBtn(row, '详情')}
          },
          {
            label: '确认采购单',
            type: 'text',
            mode: 'success',
            isShow: row => row.pstatus === 3 || row.pstatus === 4,
            event: row => {this.handleBtn(row, '确认采购单')}
          },
          {
            label: '发布为商品',
            type: 'text',
            isShow: row => row.gstatus === 3 || row.gstatus === 4,
            event: row => {this.handleBtn(row, '发布为商品')}
          },
          {
            label: '重议价',
            type: 'text',
            isShow: row => row.status === 1,
            event: row => {this.handleBtn(row, '重议价')}
          },
          {
            label: '撤回',
            type: 'text',
            mode: 'danger',
            isShow: row => row.status === 1,
            event: row => {this.handleBtn(row, '撤回')}
          }
        ],
        page: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          handleSizeChange: this.handleSizeChange,
          handleCurrentChange: this.handleCurrentChange  
        }
      }

分页方法：（this.init()是页面数据初始化）

handleSizeChange(size){
      this.tableData.page.pageSize = size
      this.init()
    },
    handleCurrentChange(page){
      this.tableData.page.currentPage = page
      this.init()
    }

操作栏方法

handleBtn(row, type) {
      const { id } = row
      switch(type) {
        case '撤回':
          this.modalMessage.id = id
          this.modalMessage.title = '撤回'
          this.modalMessage.content = '是否撤回该议价单？'
          this.modalMessage.show = true
          break;
        case '重议价':
          this.conferPrice.id = id
          this.conferPrice.isShow = true
          break;
        case '确认采购单':
          this.perchaseOrder.id = id
          this.perchaseOrder.content = row
          this.perchaseOrder.isShow = true
          break;
        case '详情':
          this.$router.push({ path: '/naturalFresh/purchase/toPerchaseInfo', query: { id } })
          break;
        case '发布为商品':
          this.$router.push ({ path: '/naturalFresh/purchase/publishGoods'})
          sessionStorage.setItem('goodsInfo', JSON.stringify(row))
          break;
      }
    }

哪里不懂得可以留言，功能比较多，慢慢摸索