二次封装饿了么表格

html代码：

  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      header-row-class-name="tableHeader"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <!--表格第一列-->
      <el-table-column
        v-if="isMultiple"
        type="selection"
        width="55"
        align="center"
      />
      <!--表格其它列-->
      <el-table-column
        v-for="(value,index) in tableTitle"
        :key="index"
        :prop="value.prop"
        :label="value.label"
        :width="value.width"
      >
        <template slot-scope="scope">
          <template v-if="!value.render">
            <template v-if="value.formatter">
              {{ value.formatter(scope.row, value) }}
            </template>
            <!-- 图片显示，预览 -->
            <template v-else-if="value.getImgurl">
              <el-image
                :src="value.getImgurl(scope.row, value)"
                style="width: 50px; height: 50px"
                :preview-src-list="value.previewSrcList ? value.previewSrcList(scope.row, value) : value.getImgurl(scope.row, value).split(',')"
              />
            </template>
            <template v-else>
              {{ scope.row[value.prop] }}
            </template>
          </template>
          <!--扩展dom-->
          <template v-else>
            <Table
              :key="`cus${index}`"
              :render="value.render"
              :param="scope.row"
            />
          </template>
        </template>
      </el-table-column>
      <!--基础操作-->
      <el-table-column v-if="operator.length>0" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-for="(value,index) in operator"
            :key="index"
            type="text"
            @click="value.click(scope.row, value)"
          >
            {{ value.text }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页插件-->
    <div
      v-show="total>0"
      class="pagination-container"
    >
      <el-pagination
        :background="false"
        :total="total"
        :page-size.sync="pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        v-bind="$attrs"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>

新建一个JS文件：导出一个render函数

// table.js
export default {
  props: {
    render: {
      type: Function
    },
    param: {
      type: Object
    }
  },
  render(h) {
    return this.render(h, this.param)
  }
}

JS:

<script>
// render函数
import Table from './table'
import { scrollTo } from '@/utils/scroll-to'
export default {
  components: { Table },
  props: {
    // 是否使用勾选框
    isMultiple: {
      type: Boolean,
      default: true
    },
    // 表头数据
    tableTitle: {
      type: Array,
      default: () => []
    },
    // 表格内容
    tableData: {
      type: Array,
      default: () => []
    },
    // 表格操作
    operator: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 10
    },
    autoScroll: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.size
      },
      set(val) {
        this.$emit('update:size', val)
      }
    }
  },
  methods: {
    // 监听table选择框
    handleSelectionChange(selection) {
      // 调用父组件对应的方法 handleSelectionChange
      this.$emit('handleSelectionChange', selection)
    },
    // 监听每页多少条数据（size）
    handleSizeChange(size) {
      this.$emit('pagination', { page: this.currentPage, size: size })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    // 监听当前是第几页（page）
    handleCurrentChange(page) {
      this.$emit('pagination', { page: page, size: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    }
  }
}
</script>

css:根据项目要求进行调整就O拉！

引用方式：

    <vTable
      ref="vTable"
      :table-title="tableTitle"
      :table-data="tableData"
      :operator="operator"
      :total="total"
      :page.sync="queryParams.page"
      :size.sync="queryParams.size"
      @handleSelectionChange="handleSelectionChange"
      @pagination="getList"
    />

import vTable from './vTable'
export default {
  components: {
    vTable
  },
  data() {
    return {
      queryParams: {
        page: 1,
        size: 10
      },
      total: 500,
      // 设置table的列
      tableTitle: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        { prop: 'address', label: '地址', width: 300 },
        {
          prop: 'src', label: '图片',
          getImgurl: (row, col, cellValue) => { return this.getImgurl(row) },
          previewSrcList: (row, col, cellValue) => { return this.listImgUrl(row) }
        },
        {
          prop: 'sex', label: '性别',
          formatter: (row, col, cellVaule) => { return this.sexFormatter(row) }
        },
        {
          prop: 'src', label: '图片',
          getImgurl: (row, col, cellValue) => { return this.getImgurl(row) }
        },
        { prop: 'text', label: '函数', render: (h, params) => { return this.render(h, params) } }
      ],
      // table的基本操作
      operator: [
        { 'text': '详情', click: (row, col, cellValue) => { return this.getInfo(row) } },
        { 'text': '删除', click: (row, col, cellValue) => { return this.delInfo(row) } },
        { 'text': '编辑', click: (row, col, cellValue) => { return this.editInfo(row) } }
      ],
      // 模拟数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: 0,
          img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-193cbb243dc14d3a016caaa54ba02837_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628435704&t=deb5584cb9ff53fe6977f14a5e0755bb'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          sex: 1,
          img: 'https://pic1.zhimg.com/80/v2-894ab624807fd4cfa33dd4e42cc90ac8_720w.jpg?source=1940ef5c'
        }]
    }
  },
  methods: {
    getInfo(val) {
      // 触发父方法
      console.log('获取详情', val)
    },
    delInfo(val) {
      // 触发父方法
      console.log('删除信息', val)
    },
    editInfo(val) {
      // 触发父方法
      console.log('编辑信息', val)
    },
    getImgurl(val) {
      return val.img
    },
    sexFormatter(val) {
      return val.sex === 0 ? '男' : '女'
    },
    // 获取选择框数据
    handleSelectionChange(val) {
      console.log('监听选择框', val)
    },
    // 分页触发
    getList(queryParams) {
      console.log('父级方法', queryParams)
    },
    // 大图预览
    listImgUrl(val) {
      const array = []
      array.push('https://pic1.zhimg.com/80/v2-894ab624807fd4cfa33dd4e42cc90ac8_720w.jpg?source=1940ef5c')
      array.push('https://cdn.pixabay.com/photo/2021/07/01/21/20/girl-6380331_960_720.jpg')
      return array
    },
    // 添加函数
    render(h, params) {
      return h('div', {
        style: {
          width: '100%',
          display: 'flex',
          alignItems: 'center'
        }
      }, [
        h('div', { class: params.sex ? 'radius-green radius' : 'radius-red radius' }),
        h('div', { style: { width: '60%' }}, this.sexFormatter(params))
      ])
    }
  }
}