Those of us who use Element UI regularly may know that the table component provided by the official website has a complete API and powerful functions, but when we use it, we need to configure a lot of properties each time. However, tables and pages are still separate, and when we write business functions, we are usually constantly configuring the API of one table after another. One or two we still feel nothing, but when a large number of forms appear, there is no headache, not only the length is large, the repeated configuration also makes us irritable. At this point, we wish that a simple table configuration could produce a list of what we need. Today, WE will teach you how to carry out the secondary encapsulation of Element Table. Here we just carry out simple encapsulation, and the specific complex requirements can be changed according to your business needs. Let’s start with the renderings

<dynamic-table :tableHeader="tableHeader" :tableData="tableData" :config="config"> <! The slot function is really useful, pass the current row of the table data, insert custom buttons, <template v-slot:handles="t"> <el-button-group> <el-link type="primary" @click="edit(t)" </el-link> <el-link type="danger" @click="delete(t)> Delete < I class="el-icon-delete" el-icon--right"></i> </el-link> </el-button-group> </template> </dynamic-table> <dynamic-table style="margin-top: 15px;" :tableHeader="tableHeader2" :tableData="tableData2" :config="config2"> <template v-slot:handles="t"> <el-button-group> <el-link type="success" @click="watch(t) icon="el-icon-view"> </ I ></ el-link> </el-button-group> </template> </dynamic-table>Copy the code

Look at this fairy code, two tables implemented in just a few lines! As you can see, there are three parts to the table that need to be passed. The first part is the tableHeader. No matter how much data you have on the table, we set the table, you have to follow the rhythm, and here, we can determine whether he is a mule or a horse. For example. The column in the first row we’re going to use as a check box, so we’re going to say, is it type = “selection”, and if we’re going to add an index, we’re going to say is it of type index, and to display an image, we’re going to say is it an image.

<el-table class="customer" :data="tableData" style="width: 100%"> <! <template v-for="(col,index) in tableHeader"> <! <el-table-column v-if="col.type == 'selection'" :label="col.label" :type="col.type" :width="col.width"></el-table-column> <! <el-table-column v-else-if="col.type == 'index'" :label="col.label" :type="col.type" :width="col.width"></el-table-column> <! <el-table-column v-else-if="col.type == 'image'" :label="col.label" :width="col.width" :prop="col.prop"> <template slot-scope="scope"> <div class="content-image"><img :src="scope.row[col.prop]"/></div> </template> </el-table-column> <! -- Add a nice icon to the date line, belong to custom, <el-table-column v-else-if="col.type == 'date'" :label="col.label" :width=" col.label" :width="col.width" :min-prop="col.prop"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row[col.prop] }}</span> </template> </el-table-column> <! -- Operation button, we don't know what the business requirements of table operation button are, so we give slot, <el-table-column V-else -if="col.type == 'handle'" :label="col.label" :min-width="col.width" :fixed="col.fixed"> <template slot-scope="scope"> <slot name="handles" :col="scope.row"></slot> </template> </el-table-column> <! All other columns that do not have a type are counted as normal default types. <el-table-column V-else :label="col.label" :min-width="col.width" :prop="col.prop" :formatter="col.formatter? col.formatter:null"> </el-table-column> </template> </el-table>Copy the code

I’m going to show you the definition data for the tableHeader.

// type:{// selection: checkbox, // date: date format, // image: picture, // expand: List expansion, // tag: Generally used to filter type tags, // export const tableHeader = [{type:'selection',// width:'55',// table column name Align :'center',// fixed:false,}, / / {/ / type: 'index', / / / / width: inline rendering of form data type '55', / / / / form of column width label: 'index, the column name / / / form/align:' center ', / / / / table column data on its way Fixed :false, //}, {prop:'createDetails',// table label:' createDetails',// table label:' center',// table label:' center' }, {type:'date',// render table row data type prop:'createDate',// column width:'120', label:' createDate',// table column name align:'center',// table column data to its way}, {prop:'createStatus',// column width:'80',// column width:'80',// column name formatter:item =>{const statusMap = {0: 'type 1', 1: } return statusMap[item.createstatus]}, align:'center', {type:'image',// Render table row data type prop:'createLogo',// field width:'120',// table column width label:' icon ',// table column name align:'center',// table column data to it }, {prop:'createAdress',// label:' address ',// width:'200', align:'center',// {prop:'createID',// label:'idCard',// width:'120', align:'center',// {prop:'createName',// width:'80',// width:'80',// label:' name ',// align:'center',// {prop:'createPhone',// width:'120',// width:'120',// width:'120',// width:'120',// width:'120',// width:'120',// width:'120',// width:'120',// {type:'handle',// type is the operation button width:'200',// table column width:'200',// table column name align:'center',// table column data is fixed:'right',// table column is fixed, Fixed to right end}]Copy the code

See here is not suddenly clear, when we reuse, just according to the field returned in the background, the table header is defined, our table is done 80%. TableData is the background tableData that we requested, and we won’t go over it here. Config contains the properties we need for pagination and tables, which I have not written here. If you need to see my next article on encapsulating pagination, please refer to this.

<script> export default {name:'DynamicTable', components:{}, props:{config:{type:Object, default:()=>{} }, tableHeader:{ type:Array, default:()=>[] }, tableData:{ type:Array, default:()=>[] } }, data(){ return { currentPage:20, } }, mounted() { }, methods:{ handleSizeChange(){ }, handleCurrentChange(){ } } } </script>Copy the code

Now, we’re done with a basic table wrapper. Page need table other functions of small partners, you can play. Do not understand the small partners can be private message I want source code, here is just less table data and paging function. I believe that the little partners will see it! I wish everyone 2020 code more write more slip, feel helpful to you of the small partner, give a praise good! Thank you very much