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>