In the actual development, table is often used as a component, so we think it can be written easily. This paper aims at the secondary encapsulation of Table in Element-UI, and the function also includes pagination. Satisfy the basic sort, selection selection.

1. Encapsulate the table

Vue component <el-table class="common-table" v-bind="config" Example: border:true :data="data" V-on ="$listeners" row-key=" ID "header-row-class-name="common-table-header-row" $emit('selectChange', $event) @sort-change="$emit('sortChange', $event)" <slot name="prepend"></slot> <el-table-column v-for="(col, The index) in the columns "is: the key =" col. Key | | index "is: label =" col. The name "is: sortable =" col. Sortable? Col. Sortable: false "/ / some columns need sort function: Such as time v - bind = "col" > < template slot - scope = "scope" > < # template header > < slot: name = "` header ${col. Key | | col. Prop} `" > {{col.name}} </slot> </template> <slot v-if="$scopedSlots[`col-${col.key || col.prop}`]" v-bind="scope" :column="col" :text="getText(scope.row, col)" :name="`col-${col.key || col.prop}`" > </slot> <template v-else > {{ getText(scope.row, </template> </el-table-column> <template #empty> <slot name="empty"></slot> </template> </el-table> <el-pagination v-if="pager" :current-page="pager.pageNum" :page-size="pager.pageSize" :total="pager.total" :page-sizes="[10, 20, 30, 50]" @size-change="$emit('pager-size-change', $event)" @current-change="$emit('pager-current-change', $event)" layout="total, sizes, prev, pager, next, jumper" style="text-align: right; margin-top: 40px;" > </el-pagination>Copy the code

2. Use a packaged form

<common-table :data="data" // table data :columns="columns" // column configuration :config="tableConfig" // table configuration :pager="pager" // page number v-on="$listeners" > <template #prepend> <el-table-column type="selection" width="36" reserve-selection > </el-table-column> </template> <template v-slot:col-id="{row}" > <span>{{row.name}}</span> </template> </common-table> Const columns: Array<ColumnConfig> = [{name: 'name', prop: 'name',}, {name: 'created', prop: 'created', sortable: 'custom', format({ row }: {row: any}) { return dayjs(row.created).format('YYYY-MM-DD HH:mm:ss'); }, }, ]; const tableConfig = { border: true, };Copy the code

3. Use of outermost components

<keys-table size="small" class="keys-table-content" :data="list" // Pager ="pager" @pager-size-change="onPagerSizeChange" @pager-current-change="onPagerCurrentChange" // Operation when the current page changes @selectChange="selectChange" @sortchange ="sortChange" > </keys-table> pager = { total: 1, pageSize: 10, pageNum: 1, }; onPagerSizeChange(size: integer) { this.pager.pageSize = size; this.query(); } onPagerCurrentChange(num: integer) { this.pager.pageNum = num; this.query(); } selectChange(val: any) { this.multipleTable = val; } sortChange(column: any) { if (column.order === 'ascending') { this.params.order = column.prop; } else { this.params.order = '-' + column.prop; }}Copy the code