对el-table进行二次封装

新建组件：

<template>
  <div class="table-container">
    <el-table
      :data="tableData"
      width="100%"
      :height="height"
      :row-style="{ height: `${rowHeight}px` }"
      v-loading="loading"
      border=""
    >
      <template v-for="(item, index) in tableHeader">
        <slot v-if="item.slot" :name="item.slot"></slot>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :type="item.type"
          :min-width="item.minWidth ? item.minWidth : ''"
          :width="item.width ? item.width : ''"
          :align="item.align || 'center'"
          :show-overflow-tooltip="item.tooltip || false "
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "CustomElTable",
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表格头标题
    tableHeader: {
      type: Array,
      require: true,
      default: () => {
        return [];
      },
    },
    // 表格高度
    height: {
      type: [Number, String],
      default: 500,
    },
    // 表格行高
    rowHeight: {
      type: [Number, String],
      default: 44,
    },
    // 加载层
    loading: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss">
.table-container {
  height: 100%;
}
</style>

使用组件：

<custom-el-table
  :tableHeader="tableData.header"
  :tableData="tableData.list"
  :loading="tableData.loading"
>
  <el-table-column slot="img" label="图片" align="center">
    <template slot-scope="{ row }">
      <el-image
        style="width: 70px; height: 50px"
        v-for="(item, index) in row.pictureList"
        :key="index"
        :src="item.pictureUrl"
        fit="cover"
        :preview-src-list="[item.pictureUrl]"
      />
    </template>
  </el-table-column>
  <el-table-column slot="status" label="状态" align="center">
    <template slot-scope="{ row }">
      <template v-if="Number(row.status) === 1">
        <el-popover
          placement="bottom"
          width="300"
          trigger="click"
          :content="row.operExplain"
        >
          <el-button slot="reference" type="text"
            >{{ row.status | filtersDict(statusList) }}
            <span class="el-icon-info"></span>
          </el-button>
        </el-popover>
      </template>
      <template v-else> {{ row.status | filtersDict(statusList) }} </template>
    </template>
  </el-table-column>
  <el-table-column
    slot="operation"
    label="操作"
    align="center"
    width="100px"
    fixed="right"
  >
    <template slot-scope="{ row }">
      <el-button
        type="text"
        icon="el-icon-circle-check"
        class="table-edit-btn"
        @click="handleOperation(row)"
        >处理</el-button
      >
    </template>
  </el-table-column>
</custom-el-table>

　　

tableData: {
  loading: false,
  total: 0,
  header: [
    { label: "序号", type: "index", width: "120px" },
    { label: "农户姓名", prop: "farmerName" },
    { label: "联系电话", prop: "farmerMobile" },
    { label: "购买内容", prop: "content", tooltip: true },
    { label: "购买原因", prop: "applyReason", tooltip: true },
    { slot: "img" },
    { label: "送货地址", prop: "detailAddr" },
    { label: "发布时间", prop: "applyTime" },
    { slot: "status" },
    { label: "处理人", prop: "operName" },
    { slot: "operation" },
  ],
  list: [],
},

　　

需要修改的自己添加自己定义的属性！！！！！