A new small project, VUE3 has been out for a long time, can be put into practice!

For a background management system, the table component is indispensable. With a large number of tables, you need to reuse as many components as possible. Let’s improve our skills and get better at catching fish. Hey hey.

Don’t say a word, get to work!

The first thing is that you have element-Plus installed by default, which encapsulates axios as a whole, because you’re using typescript (which you just learned) and it’s not easy to use

The table component

<div class="table"> <el-table ref="TableComponents" :header-cell-style="{background:'#F7F7F7',color:'#333'}" :size="size" :border="border" :data="tableData" :tree-props="treeProps" :fit="fit" :max-height="maxHeight" :row-key="rowKey" :highlight-current-row="true" :automatic-dropdown="false" @selection-change="handleSelectionChange" > <template v-for="item in columns" :key="item.prop"> <slot :name="item.slot" v-if="item.slot&&item[dataKey.label]"></slot> <el-table-column :prop="item[dataKey.prop]" show-overflow-tooltip :label="item[dataKey.label]" v-if="item[dataKey.label]&&! item.slot" :formatter="item.formatter" :min-width="item.width"> </el-table-column> <el-table-column type="selection" width="55" v-if="! item[dataKey.label]&&! item.slot" :selectable="checkSelectable"></el-table-column> </template> <slot name="operation"></slot> </el-table> <el-pagination v-if="pageIsShow&&pageTotal>10" class="pagination" :size="size" :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal" :current-page="currentPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" > </el-pagination> </div> </template> <script lang="ts"> import { defineComponent,  watch } from 'vue' export default defineComponent({ name:'table', props:{ loading:{ type:Boolean, default:true }, Columns :{type:Array, default:[] // tableData}, columns:{type:Array, default:()=>[]// table columns}, pageIsShow:{type:Boolean, Default :true // whether an izes is displayed}, pageSizes:{type:Array, default:()=>[10, 15, 20,30,50,100] // intelligent paging options}, pageSize:{type:Number, Default :()=>10 // Default Number of entries per page}, pageTotal:{type:Number, default:()=>0 // Total Number}, border:{type:Boolean, Stripe :{type:Boolean, default:true // Whether it is zebra stripe table(default)}, fit:{type:Boolean, }, size:{type:String, default:'small'}, treeProps:{type:Object, default ()=>{}}, rowKey:{ type:String||Function,default:()=>'' }, dataKey:{ type:Object, Default ()=>{return {label:'label',prop:'prop'}}}, currentPage:{type:Number, default ()=>1 // currentPage Number}, height:{ type:String, default:'55px' }, maxHeight:{ type:Number, default:()=> { return document.body.offsetHeight-210 } } }, setup(props, ctx) { const { emit } = ctx; const handleSelectionChange = (val: any) => emit('selection-change', val); const handleSizeChange = (val: number) => emit('size-change', val); const handleCurrentChange = (val: number) => emit('current-change', val); const handleClickActiveLink = ($event: MouseEvent, row: any) => emit('get-row-info', $event, row); const checkSelectable = (row: any) => row.name ! == 'None'; return { handleSelectionChange, handleSizeChange, handleCurrentChange, handleClickActiveLink, checkSelectable } }, }) </script> <style lang="scss" scoped> .table{ .pagination{ margin-top: 10px; text-align: right; padding-left: 20px; } } </style>Copy the code

And then the hooks. Ts

import { onMounted, reactive } from 'vue' import { HttpListQuery, IdParam} from '@/@types/index' /** export interface HttpListQuery {pageNo: number pageSize: number string]: any } export interface IdParam { id: number } export interface HttpResponse { code: number status: number statusText: string result: Any} **/ import CommonService from '@/ API /common' class CommonService {/ getTableList(url:string,data:HttpListQuery): Promise<HttpResponse> { return Axios(url,{ method: 'post', headers: { 'Content-Type': 'application/json' }, data }) } static async deleteItem(url:string,data:IdParam): Promise<HttpResponse> { return Axios(url,{ method: 'post', headers: { 'Content-Type': 'application/json' }, data }) } } **/ import { successMessage } from "@/utils/message"; Interface Params{searchUrl: string // search API address deleteUrl: string // Delete API address searchData: Any // search data} const useTable = (options:Params) => {let {searchUrl, deleteUrl, SearchData} = options const searchState = reactive({searchData, pageNo: 1, pageSize: }) const dataState = reactive({tableData: [], total:0}) const getTableList = async (Params:HttpListQuery) => {let {code, result } = await CommonService.getTableList(searchUrl, Params) if(code === 200) {datastate. tableData = result.records datastate. total = result.total}} OnMounted (()=>{getTableList({... SearchState})}) const deletaItem = async (deleteId:IdParam) => {let {code, Result} = await commonService. deleteItem(deleteUrl,deleteId) if(code === 200) {successMessage(' delete successful ') GetTableList (searchState)}} const sizeChange = (val:number) => {searchState.pageno = 1; searchState.pageSize = val; GetTableList (searchState)} // Const currentChange = (val:number) =>{searchState.pageno = val; getTableList(searchState) } return { searchState, dataState, getTableList, deletaItem, sizeChange, currentChange } } export default useTable;Copy the code

Now that the basics are done, it’s time to call in the component, map in the component and hooks

// template <Table :columns="columns" :tableData="tableData" :page-total="total" @size-change="sizeChange" @current-change="currentChange"> <template #operation> <el-table-column label=" fixed="right" :width="150"> <template  v-slot="scope"> <div class="table-operation"> <span type="text" class="text-btn" > <el-popconfirm ConfirmButtonText =' yes' cancelButtonText=' no 'icon="el-icon-info" iconColor="red" title=" Are you sure to delete XXX?" @confirm="delete(scope.row.id)" > <template #reference> <span> delete </span> </template> </el-popconfirm> </span> </div> </template> </el-table-column> </template> </ table > //ts <script lang="ts"> // Export default defineComponent({  components:{Table}, setup() { const tableState = reactive({ searchParams: { typeName: '', typeCode:'' }, columns: [ {prop: 'XXX', label: 'XXX',width:180}, {prop: 'XXX', label: 'XXX'}, {label: }) const params = {searchUrl: 'XXX', deleteUrl:'XXX', searchData: tableState.searchParams } const { getTableList, deletaItem, sizeChange, currentChange, searchState, dataState, } = useTable(params) const getPageList = ():void => {getTableList({... SearchState})} // Delete method const delete = async (id:number) => {deletaItem({id})} return {... toRefs(tableState), ... toRefs(searchState), ... toRefs(dataState), getPageList, sizeChange, currentChange, delete } } }) </script>Copy the code

This is the first time to post, sorry for any mistake. Limited technology, please give us more advice!