Encapsulate Table table based on Vue and element

First, we define a public component in components,

The code for the Table table is as follows

<template>
  <div v-loading="loading">
    <el-table ref="tableData" :stripe="stripe" :max-height="maxHeight" header-row-class-name="table-list-header" row-class-name="table-list-row " :size="tableSize" :data="data" @current-change="handleTableCurrentChange" @row-click="handleTableRowClick" v-bind="otherConfig">
      <template v-for="(item, index) in columns">
        <!-- selection box -->
        <el-table-column v-if="item.selection" type="selection" width="55" :fixed="item.fixed" align="center" header-align="center" :key="` selection_${index}`"></el-table-column>
        <!-- serial number -->
        <el-table-column v-else-if="item.index" type="index" width="80" :fixed="item.fixed" label="serial number" :index="item.indexMethod" :key ="`index_${index}`"></el-table-column>
        <!-- Multi-level header -->
        <el-table-column v-else-if="item.multi" align="center" :label="item.label" :key="`multi_${index}`">
          <el-table-column v-for="(child, childIndex) in item.children" :key="`child_${index}_${childIndex}`" v-bind="child">
          </el-table-column>
        </el-table-column>
        <!-- Customize content (add, delete, modify, etc. or insert HTML) -->
        <slot v-else-if="item.slot" show-overflow-tooltip :name="item.slot" :fixed="item.fixed" :height="item.height"></slot>
        <!-- General content -->
        <el-table-column v-else show-overflow-tooltip v-bind="item" :fixed="item.fixed" :min-width="item.minWidth" :key="`normal_${index}` "></el-table-column>

      </template>
    </el-table>
    <!-- eslint-disable -->
    <!-- eslint-enable -->
    <!-- Custom content -->
    <slot name="custom-content"></slot>

    <!-- <el-table-column v-for="item in columns" :label="item.labeu" :key="item.prop">
        <template #default>
          <slot :name="item.prop">
            <span>{<!-- -->{ list[item.prop]}}</span>
          </slot>
        </template>
        </el-table-column> -->
  </div>
</template>
 
 
<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    wrapperHeight: {
      type: [Number, String],
      default: '100%',
    },
    maxHeight: {
      type: [Number, String],
      default: 'auto',
    },
    //table format
    tableSize: {
      type: String,
      default: 'medium',
    },
    //Whether it is a zebra pattern table
    stripe: {
      type: Boolean,
      default: true,
    },
    otherConfig: {
      type: Object,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  methods: {
    // radio
    handleTableCurrentChange(currentRow) {
      this. $emit('changeCurrent', currentRow)
    },
    // Click on the row to get the number of rows
    handleTableRowClick(currentRow) {
      this. $emit('rowClick', currentRow)
    },
  },
  watch: {
    data() {
      // table scrolls to the top when data is re-requested
      this.$refs.tableData.$refs.bodyWrapper.scrollTop = 0
    },
  },
}
</script>
 
 
<style>
</style>

Then create a tableList.js file

The code of the tableList.js table is as follows

// category list
export const columnsStaff = [
    { prop: "id", label: "ID", align: "center" },
    { prop: "catName", label: "category name", align: "center" },
    { prop: "createTime", label: "createTime", align: "center" },
    { prop: "updateTime", label: "Modification Time", align: "center" },
    { slot: 'action', }
]

// merchant list
export const merchantsList = [
    { prop: "merchantName", label: "merchantName", align: "center" },
    { prop: "account", label: "Business Account", align: "center" },
    { slot: 'merchantType' },
    { prop: "linkName", label: "Legal Person", align: "center" },
    { prop: "address", label: "Contact address", align: "center" },
    { prop: "cat", label: "Business type", align: "center" },
    { prop: "balance", label: "balance", align: "center" },
    { slot: 'status' },
    { slot: 'sellStatus' },
    { prop: "createTime", label: "Entry Time", align: "center" },
    { slot: 'action' }
]

After these two files are created, we go to man.js to import and mount globally

// custom table component
import table from './components/el-table/index'

// global method mount
Vue. component("Table", table);

Then you can go to the vue page and use it

 <template>
  <div class="app-container">
    <Table :columns="columns" :data="customerList" v-loading="loading">
      <!-- Control whether to display through slot -->
      <template v-slot:merchantType>
        <el-table-column label="Entry type" align="center">
          <template slot-scope="scope">
            <div>{<!-- -->{scope.row.merchantType == 1 ? 'Online Merchant' : 'Offline Merchant'}}</div>
          </template>
        </el-table-column>
      </template>
      <template v-slot:status>
        <el-table-column label="status" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ?'success' : 'danger'">{<!-- -->{scope.row.status == 1 ? 'Up' : 'Down frame'}}</el-tag>
          </template>
        </el-table-column>
      </template>
      <template v-slot:sellStatus>
        <el-table-column label="logout status" align="center">
          <template slot-scope="scope">
            <div>{<!-- -->{scope.row.sellStatus == 1 ? 'normal' : 'logged out'}}</div>
          </template>
        </el-table-column>
      </template>

      <template v-slot:action>
        <el-table-column label="operation" fixed="right" align="center" width="200px" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-bell" >Send message</el-button>
            <el-button icon="el-icon-sold-out" size="mini" type="text">{<!-- -->{scope.row.status == 0?'Up':'Down frame'}}</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </template>
    </Table>
  </div>
</template>

<script>
import { merchantList } from '@/api/system/customer'
export default {
  data() {
    return {
      loading: false, // mask layer
      columns: merchantsList, // header
      customerList: [], // list data
      queryParams: {
            current: 1,
            size: 10,
          },
        }
     },
  mounted() {
    this. getList()
  },
  methods: {
    // query parameter list
    getList() {
      this.loading = true
      merchantList(this.queryParams).then((response) => {
        this.customerList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
  },
}
</script>