Secondary development of elementUI table components
Vue2.6 + JSX is based on es6
demo
<picc-table
:column="includeTable"
:data="includeData" height="auto"
:selection="true"
:number="true"
:showPagination="false"
:single="true">
<template slot="action" slot-scope="{ scope }">
<el-button @click="eventClickDelete(scope)">delete</el-button>
<el-button><a href="http://www.baidu.com" target="_bank">download</a></el-button>
</template>
</picc-table>
Copy the codeProps that
@name table component @param {data} JSON data @param {column} object const tableColumn = [{prop: "contractId",label: "contractId"},{prop: "Action ",label: "action", slot: "action"}]; @param {pagination} Boolean Whether to display pagination @param {pagination} listQuery: {total: 0, page: 1,limit: 10,importance: undefined, title: undefined, type: undefined, sort: "+ ID "} @param {selectable} function Check whether @param {number} Boolean check whether line number @param {single} Boolean check whether @event onChange Paged request data @event SELECTED Multiple @Event currentSelect singleCopy the codeComponent source
/ * * *@template <picc-table :data="tableData" :column="tableColumn" :pagination="listQuery" @onChange="onPageChange">
<template slot="action" slot-scope="scope">
<el-button type="text" @click</el-button> </template> </picc-table>@name Form components@param {data} The JSON data@param {column} Object const tableColumn = [{prop: "contractId",label: "contractId"},{prop: "action",label: "operation ", slot: "action"}];@param {showPagination} Boolean Whether paging is displayed@param {pagination} listQuery: { total: 0, page: 1,limit: 10,importance: undefined, title: undefined, type: undefined, sort: "+id" }
@param {selectable} Function Checks whether the function can be selected@param {number} Boolean Whether to display the line number@param {single} Boolean Indicates whether this parameter is optional@event OnChange paging request data@event Selected multi-select@event CurrentSelect radio * /
import Pagination from "@/components/Pagination";
import "./piccTable.scss";
let selectMap = new Map(a);export default {
name: "picc-table".comments: { [Pagination.name]: Pagination },
props: {
data: {
type: Array.default() {
return [];
} / / data
},
column: {
type: Array.defualt() {
return[]; }},// Paging information
pagination: {
type: Object.default() {
return {
total: 100.page: 0.limit: 20.pageNo: 0}; }},selection: { type: Boolean.default: false },
// Display page flipping
showPagination: {
type: Boolean.default: true
},
// Return false or true if selected
selectable: { type: Function.default() { return new Function()}},/ / height
height: { type: String.default: "400" },
/ / serial number
number: { type: Boolean.defualt: false },
single: { type: Boolean.default: false}},data() {
return {
radio: ""
};
},
mounted() {
this.init();
},
methods: {
init() {
selectMap = new Map(a);this.$refs.table.clearSelection();
},
// TODO:Create a header
createColumn() {
let children = ({ slot }) = > {
if (slot) {
return this.$scopedSlots[slot]; }};let col = this.column.map((item = { prop: "", label: "--", align: "center" }, ind) = > {
return (
<el-table-column prop={item.prop} label={item.label} show-overflow-tooltip align="center" key={ind} width={item["width"] || "auto"} >
{children(item)}
</el-table-column>
);
});
/ / select box
/ / serial number
if (this.number) {
col.unshift(<el-table-column
fixed="left"
type="index"
width="50"
label="Serial number"
align="center"
/>)}/ / multi-select
if (this.selection && !this.single) {
col.unshift(<el-table-column
fixed="left"
type="selection"
width="50"
selectable={this.selectable}
/>)}/ / / / radio
if (this.single) { col.unshift(<el-table-column fixed="left" width="50" label="" {... { scopedSlots: { default: (scope) => { return <el-radio class="singleRadio" label={scope.row.id} value={this.radio} /> } } }} > </ el-table-column>) } return col; }, // TODO: EventOnPagination(data) {let pagination = object.assign ({... this.pagination }, { ... data }); this.$emit("onChange", pagination); }, // TODO: sync page SyncEventlimit(data) { // let limit = { limit: data }; // this.EventOnPagination(pages); }, // TODO: sync page SyncEventpage(data) { // let page = { page: data }; // this.EventOnPagination(page); }, // set setSelected(row) {let {pageNo} = this.pagination; Selectmap. set(pageNo, row.map((item) => {return item.id; })); } else { selectMap.delete(pageNo); } this.$emit("selected", selectMap); }, eventSelectionChange() { }, eventCurrentChange(val) { this.radio = val.id; $emit('currentSelect', val)} eventSelect(selection) {this.setselected (selection); }, // select eventSelectAll(selection) {this.setselected (selection); } }, render() { let { data, pagination, showPagination, height, single } = this; let showPage = () => { if (showPagination) { return <Pagination total={pagination.total} page={pagination.page} limit={pagination.limit} showHeader={true} {... { on: { "update:limit": this.SyncEventlimit, "update:page": this.SyncEventpage, pagination: this.EventOnPagination } }} /> } } return ( <article class='picc-table'> <el-table data={data} fit border Empty-text =" no data "style="width: 100%" height={height} highlightCurrentRow={single} class={{"single": true}} {... { ref: "table", on: { "select": this.eventSelect, "select-all": this.eventSelectAll, "selection-change": this.eventSelectionChange, "current-change": this.eventCurrentChange } }} > {this.createColumn()} </el-table> {showPage()} </article > ); }};Copy the codePagination @/components/Pagination
This component is intended only for use with page turning
<template>
<div v-if="total > 0" :class="{ hidden: hidden }" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { scrollTo } from "@/utils/scroll-to";
export default {
name: "Pagination".props: {
total: {
required: true.type: Number
},
page: {
type: Number.default: 1
},
limit: {
type: Number.default: 10
},
pageSizes: {
type: Array.default() {
return [10.20.30.50]; }},layout: {
type: String.default: "total, sizes, prev, pager, next, jumper"
},
background: {
type: Boolean.default: true
},
autoScroll: {
type: Boolean.default: true
},
hidden: {
type: Boolean.default: false}},computed: {
currentPage: {
get() {
return this.page;
},
set(val) {
this.$emit("update:page", val); }},pageSize: {
get() {
return this.limit;
},
set(val) {
this.$emit("update:limit", val); }}},methods: {
handleSizeChange(val) {
this.$emit("pagination", { page: this.currentPage, limit: val });
if (this.autoScroll) {
scrollTo(0.800); }},handleCurrentChange(val) {
this.$emit("pagination", { page: val, limit: this.pageSize });
if (this.autoScroll) {
scrollTo(0.800); }}}};</script>
<style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>
Copy the codeSCSS to hide the radio label, import “./ picctable. SCSS “;
.single{
/ / radio
.singleRadio{
.el-radio__label{
display: none; }}}Copy the code