Today I’m going to do a table based on element UI. The general blueprint is to click the Add button and add a row of data to the table. This data can be either a list given by the background or a form item configured by yourself. I’ll give you the picture first!

Click to add the popover effect as follows:

Let’s start by putting together the forms and pop-ups. We’re going to make two tables, a popover, and a form, and we’ll do it for you. The layout structure is written in the code comments, not verbose

<template> <div class="editTable"> <! <el-button @click="add"> </el-button> <el-button @click="save"> </el-button> <! -- This is our action button group end--> <! -- table start --> <el-table :data="tableData"> <template V-for ="(item,index) in header"> <el-table-column V-if ="item.prop == 'options'" :label="item.label" :prop="item.prop" :width="item.width" :fixed="item.fixed"> <template slot-scope="scope"> <el-button-group> <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(scope.row)"> edit </el-button> </el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteIt(scope.row)"> Delete </el-button> </el-button-group> </template> </el-table-column> <el-table-column v-else-if="item.prop ! = 'selection'" :label="item.label" :formatter="item.formatter? item.formatter:null" :prop="item.prop" :width="item.width"> </el-table-column> </template> </el-table> <! -- form start --> <! Start --> <el-dialog title=" unavailable ": view. sync="tableVisiable" width=" unavailable "> <el-tabs V-model ="activeName"> < El-Tab-Pane label=" Custom data "name="customer"> <! -- First of all, let's draw a form. <el-form :model="tableForm" label-width="80px"> <el-form-item label=" name :"> <el-input V-model ="tableForm.name"></el-input> </el-form-item> <el-form-item label=" date :"> <el-date-picker V-model ="tableForm.date" Align ="right" type="date" placeholder=" value "format=" YYYY-MM-DD "> </el-date-picker> </el-form-item> <el-form-item Label =" type :"> <el-select V-model ="tableForm.type" placeholder=" please select type" >< el-option label=" table 1" value="0"> <el-option label=" dynamic table 2" value="1"></el-option> </el-select> </el-form-item> <el-form-item label=" address :"> <el-radio-group V-model =" tableform. address"> <el-radio label="1" </el-radio> <el-radio label="2"> </el-radio> </el-radio> </el-radio> </el-form-item> </el-form> </el-tab-pane> <! < el-Tab-pane label=" Select historical data "name="default"> < EL-table :data="checkData" ref="defaultTable" @selection-change="tableSelectionChange"> <template v-for="(item,index) in header"> <el-table-column v-if="item.prop == 'selection'" type="selection" :width="item.width"></el-table-column> <el-table-column v-else-if="item.prop ! = 'options'" :label="item.label" :formatter="item.formatter? item.formatter:null" :prop="item.prop" :width="item.width"> </el-table-column> </template> </el-table> </el-tab-pane> </el-tabs> <! <div slot=" unavailable "class="dialog-footer"> <el-button @click=" unavailable = false"> <el-button type="primary" @click="confirmAdd"> confirmAdd </el-button> </div> </el-dialog> <! End --> </div> </template>Copy the code

First we look at the table, we take the table header custom, and then loop out, so that we can share a table header in the dialog, students can also request to wrap their own table to use.

export default { name: 'editTable', data() {return {tableVisiable:false, unavailable :'customer',// tab-based table header definition header :[{prop:] "Selection ", width: "55"}, {prop: "name", label: "name",}, {prop: "date", label: "date", width: "180", formatter: }, {prop: "type", label: "type", width: "180", // table attributes can be used to filter data formatter:item =>{const statusMap = {0: 'dynamic table 1', 1: } return statusMap[item.type]}}, {prop: "address", label: "address", formatter:item =>{const statusMap = {1: } return statusMap[item.address]}}, {prop: "options", label: "operation ", width: "200", fixed: CheckData :[{date:'2017-06-21', type:'0', name:' default data 1', address:'1', options:'', }, {date: '2017-05-20', type: '1', name: '2' default data, address: '2', the options: "',}], / / form initial data tableData: [{date: '2017-03-11', type: '1', name: '3', address: '1', the options: '6'}], / / choice of data binding multipleSelection: []. / / form binding data tableForm: {date: '2017-03-22', type: '0', name: 'default data, address:' 1 ', the options: "',}}}} < / script >Copy the code

So let’s look at the initial table

When we loop through the header, we distinguish the action button column to determine whether it is the action column. If it is, we add the fixed option to the header data. This is to fix the action column at the end, so that the button can be indented into the scrollbar without affecting the change of the view. However, our base table does not need the checkbox, so we decided to remove the checkbox column. In addition, the filtering method of the form, because when we add data through the form, there are radio selection and drop-down box, the return value is a number, pull the background data may also give you a variety of numbers for you to filter, so we need to display it in Chinese, add this filtering method. The same goes for the table in our dialog. As mentioned above, we can encapsulate the table as a component to call, and the kids can do their own thing.

Note that the radio/drop down values are strings or numbers. Let’s look at processing in methods

Add () {this.tableVisiable = true; // Open popover}, If (this.activename == 'customer') {if(this.activename == 'customer') { Let data = object.assign ({},this.tableForm) this.tabledata.push (data); // Assign ({}, this.tableform) this.tabledata.push (data); }else{// Select default data add, using ES6 syntax... Copies the selected data let data = [... this. MultipleSelection]; This.tabledata = this.tabledata.concat (data); Select the default data, contact / / in the window closed, want to remove the selected, or the next open the popup window will find that the last time the selected state remains this. $refs. DefaultTable. ClearSelection (); }; this.tableVisiable = false; HandleDelete (index) {this.tableData.splice(index, 1)}, // Save the submission you added to save() {// After saving the data, process the submission to the background. let data = JSON.stringify(this.tableData) this.$message({ dangerouslyUseHTMLString: true, message: `<strong>${data}</strong>` }); }, // Add row tableSelectionChange(val){this.multipleselection = val; }, edit(row){debugger}, deleteIt(row){debugger}}Copy the code

There are all processing annotations in methods, which will not be explained in detail here. We should note that these are only static data processing at present. After adding asynchronous requests, we need to add loading and other operations by ourselves, so as to provide users with better user experience. Hope this article is helpful to you, there are incorrect or code unfriendly places to advise. Finally, I give you a screenshot of the effect: feel useful to you trouble to a careful heart, thank you!