el-table表单的 二次封装

     <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px; border: 1px solid #ebeef5"
        stripe
      >
        <el-table-column width="80" label="序号" align="center" type="index" />
        <template v-for="head in tableHeaders">
          <el-table-column
            v-if="head.show"
            :key="head.value"
            :prop="head.value"
            :label="head.label"
            :width="head.width"
            align="center"
          >
            <template slot-scope="scope">
            <!--过滤器 根据自己需要  见下文备注信息-->
              <span v-if="head.value === 'status'">
                {{ scope.row.status | filterHandleStatus(scope.row.status) }}
              </span>
              <!--过长时弹框展示-->
              <span v-else>{{ scope.row[head.value] }}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column width="200" label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="center-evenly">
              <el-button
                type="text"
                @click="handleView(scope.row)"
              >
                审核
              </el-button>
              <el-button type="text" @click="checkView(scope.row)">
                查看
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

-------------------------------------------------------------------------

 data() {
    return {
      tableData: [],//调用自己查询列表信息的方法 进行赋值
      loading: '',
      tableHeaders: [
        { label: '申请人', width: 100, value: 'applyPersonName', show: true,width:100 },
        { label: '报销人', width: 100, value: 'reimburseName', show: true },

      ]
    }
  },
-----------------------------------------------------------------------
     调用方法
    async handleDataLis() {
      this.loading = true
      let params = {}
      params = {
        ...this.queryInfo,
        ...this.page
      }
      const res = await querySimpleReimburseInfo(params)
      if (res && res.code === 200) {
        this.tableData = res.data
        this.total = res.totalCount
      }
      this.loading = false
    },
--------------------------------------------------------------------------
/** 配置过滤方法  新建一个JS 文件  **/
import Vue from 'vue'
import {HANDLE_STATUS} from '@/config/index'

Vue.filter('filterHandleStatus', function (v) {
  const result = HANDLE_STATUS.find(item => item.value === v)
  if (result) {
    return result.label
  } else {
    return v

------------------------------------------------------------------------
在main.js配置过滤器
import * as filters from './filters/index'
  }
})