vue项目中将element-ui table表格写成组件的实现代码

<el-table :data="tableData" border size="mini" fit highlight-current-row height="500">
  <el-table-column type="index" align="center" fixed></el-table-column>
  <el-table-column prop="DHM" min-width="140px" label="时间" align="center"></el-table-column>
  <el-table-column prop="PLAZANO" min-width="100px" label="编码" align="center"></el-table-column>
  <el-table-column prop="PLAZANAME" min-width="100px" label="名称" align="center"></el-table-column>
  <el-table-column prop="CAR_PLATE" label="号码" align="center"></el-table-column>
  <el-table-column prop="CARD_NO" min-width="120px" label="卡号" align="center"></el-table-column>
  <el-table-column prop="DATATYPE" label="数据类型" align="center" :formatter="formatDATATYPE"></el-table-column>
  <el-table-column prop="STAFFNAME" min-width="100px" label="姓名" align="center"></el-table-column>
  <el-table-column prop="MEDIATYPE" label="付款方式" align="center"></el-table-column>
  <el-table-column prop="COMP_CASH" label="计算费额" align="center"></el-table-column>
  <el-table-column prop="FACT_CASH" label="实收费额" align="center"></el-table-column>
  <el-table-column label="操作" min-width="140px" align="center">
    <template slot-scope="scope">
     <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
     <el-button type="text" size="small">编辑</el-button>
    </template>
  </el-table-column>
</el-table>

<el-table :data="tableData" border size="mini" fit highlight-current-row height="500" :row-style="rowStyle" @row-dblclick="rowDblclick"
   v-loading="loading"
   element-loading-text="拼命加载中"
   element-loading-spinner="el-icon-loading"
   element-loading-background="rgba(0, 0, 0, 0.3)">
   <el-table-column type="index" align="center" fixed></el-table-column>
   <!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), oper: 是否有操作列
      oper.name: 操作列字段名称, oper.clickFun: 操作列点击事件, formatData: 格式化内容 -->
   <el-table-column v-for="(th, key) in tableHeader"
    :key="key"
    :prop="th.prop"
    :label="th.label"
    :fixed="th.fixed"
    :min-width="th.minWidth" align="center">
     <!-- 加入template主要是有操作一栏， 操作一栏的内容是相同的， 数据不是动态获取的，不过我这里操作一栏的名字定死了（oper表示是操作这一列，否则就不是） -->
     <template slot-scope="scope">
      <div v-if="th.oper">
       <el-button v-for="(o, key) in th.oper" :key="key" @click="o.clickFun(scope.row)" type="text" size="small">{{o.name}}</el-button>
      </div>
      <div v-else>
       <span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
       <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
      </div>
     </template>
   </el-table-column>
</el-table>

// 这里是传入的数据 
props: {
  tableData: {
   type: Array,
   default: function () {
    return []
   }
  },
  rowDblclick: {
   type: Function,
   default: (row, event, column) => { console.log('default: ' + row + '---' + event + '---' + column) }
  },
  tableHeader: {
   type: Array,
   default: function () {
    return []
   }
  },
  loading: {
   type: Boolean,
   default: false
  }
 },

 <table :tableData="tableData" :rowDblclick="rowDblclick" :tableHeader="tableHeader" :loading="loading"></table>

export const tableHeader = [ // 表头数据
 { prop: 'dhm', label: '时间', minWidth: '140px' },
 { prop: 'plazano', label: '编码', minWidth: '100px' },
 { prop: 'plazano', label: '名称', minWidth: '100px', formatData: val => store.getters.allPlazano2Map.get(val) },
 { prop: 'car_plate', label: '号码' },
 { prop: 'card_no', label: '卡号', minWidth: "120px" },
 { prop: 'laneno', label: '数据类型', formatData: function(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' } },
 { prop: 'staffname', label: '姓名', minWidth: '100px' },
 { prop: 'mediatype', label: '付款方式' },
 { prop: 'comp_cash', label: '计算费额' },
 { prop: 'fact_cash', label: '实收费额' },
 { prop: 'oper', label: '操作', fixed: 'right', minWidth: '140px',
  oper: [
   { name: '查看', clickFun: handleClick },
   { name: '编辑', clickFun: editClick }
  ]
 }
]

export function formatters(val, format) {
  if (typeof (format) === 'function') {
   return format(val)
  } else return val
}

import * as filters from './filters'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

exports.install = (Vue, options) => {
 Vue.prototype.validator = {
  lanenoTransf(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' }
 }
}

import validator from '@/utils/validate'
Vue.use(validator)

{ prop: 'laneno', label: '数据类型', formatData: this.lanenoTransf },