Preface:

I’ll just briefly describe the requirements: an ElementUi-based backend management system needs to implement a custom table, all of which can be customizable input, including the header (the backend input defines the header displayed in the foreground, not the backend page header). Tables need to dynamically add and remove rows and columns, as well as tables themselves. To be honest, this thing looks really nothing, the result of doing it really disgusted me, it may not be very good, you guys please excuse me. My purpose in writing this blog post is simply to document this issue.

Concrete implementation:

Install elementUI

	npm install babel-plugin-component -D'
Copy the code

A complete introduction

	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
Copy the code

Function realization:

  • HTML part
<div id="app"> <el-form> <div v-for="(item,index) in tab" :key="index"> <! <el-input v-model="item.title"></el-input> <el-table :data="item.data" size="small" empty-text=" no data" border :header-cell-style="{background:'#eef1f6',color:'#606266'}"> <el-table-column v-for="col in cols[index]" align="center"> <template slot-scope="scope"> <el-input v-model="scope.row[col.prop]" value-key="index" Size ="small"></el-input> </template> </el-table-column> <el-table-column label=" operation "align="center"> <template Slot-scope ="scope"> <el-button type="text" size="mini" @click="addLine(index,scope.$index)"> </el-button> <el-button Type ="text" size="mini" @click="delLine(index,scope.$index)"> </el-button> @click="addCol(index)"> </el-button> <el-button type="text" size="mini" @click="delCol(index)"> </template> </el-table-column> </el-table> <el-button type="primary" @click="addTab"> add table </el-button> <el-button @ click = "delTab" > delete form < / el - button > < / div > < / el - form > < / div >Copy the code
  • Js:
import Vue from 'vue'; Export default Vue. Extend ({name: 'App', data () {return {TAB: [{title: '', data: [{column1: '', column2: '', column3: '', column4: '' }, { column1: '', column2: '', column3: '', column4: '' }, { column1: '', column2: '', column3: '', column4: '' }, { column1: '', column2: '', column3: '', column4: '' } ] }], cols: [ [ {prop:'column1'}, {prop:'column2'}, {prop:'column3'}, {prop:'column4'} ] ] } }, methods: Column3: "3",column4: "4"} // Target data format: {column1: "1",column2: "2",column3: "3",column4: "4"} "", column2: "", column3: ", column4: ""} // Push to data list after processing let line = {}; let tabKeys = Object.keys(this.tab[tabIdx].data[lineIdx]); tabKeys.forEach(item=>{ line[item] = ''; }) this.tab[tabIdx].data.push(line); }, // delete row delLine (tabIdx,lineIdx) {this.tab[tabIdx].data. }, // add column addCol (tabIdx) {let col = this.cols[tabIdx].length + 1; let prop = "column" + col; let title = { prop }; Let data = this.tab[tabIdx].data; data.forEach(item=>{ //item[prop] = ''; Vue. Set (item,prop,''); }); // This. Cols [tabIdx].push(title); // This. Cols [tabIdx].push(title); }, // delete column delCol (tabIdx) {let len = this.cols[tabIdx].length; let data = this.tab[tabIdx].data; let prop = "column" + len; Data. forEach(item=>{// Delete the element in each row of the array object, and delete the entire column Vue. }); Enclosing cols [tabIdx] splice (len - 1, 1); }, // add table addTab () {let newTab = this.tab; Const newTab = {title: ", data: [{column1: ", column2: ", column3: ", column4: '' }, { column1: '', column2: '', column3: '', column4: '' }, { column1: '', column2: '', column3: '', column4: '' }, { column1: '', column2: '', column3: '', column4: '' } ] }; this.tab.push(newTab); const prop = [ {prop:'column1'}, {prop:'column2'}, {prop:'column3'}, {prop:'column4'} ]; this.cols.push(prop); }, // delete table delTab () {let len = this.tab.length -1; this.tab.splice(len,1); }}});Copy the code

Note: Please customize the style according to your own needs

The data processing

  • Js part
methods: {subForm () {// The back end stores the form data in the form of a multidimensional array, while the front end stores the data in the form of an array object, Let TAB = this.tab. Map (item=>{let arrs = []; item.data.forEach(item=>{ let arr = Object.values(item); // Get the data for each row in the table and convert it to an array arrs.push(arr); // Push each row of data into the entire table array}); return arrs; }); Return {title: item.title, table: TAB [index]}}); let data = this.tab.map((item,index)=>{return {title: item.title, table: TAB [index]}}); console.log(data); }, // getData () {// This is the data interface of the request. Into the echo data const data = [{/ / this is what I actually passed in data format conversion out the title: 'this is the first form, the table: [[" 1 ", "2", "3", "4"], [" 1 ", "2", "3", "4"]. ["1", "2", "3", "4"] ["1", "2", "3", "4"]]}]; this.tab = data.map(item=>{ let data = item.table.map(item=>{ let obj = {}; item.forEach((item,index)=>{ obj[`column${index+1}`] = item; }); return obj; }); return { title: item.title, data: data } }); This.cols = this.tab.map(item=>{let prop = object.keys (item.data[0]); let arr = []; prop.forEach(item=>{ let obj = {}; obj['prop'] = item; arr.push(obj); }); return arr; }); } } created(){ this.getData(); }Copy the code

References:

  1. ElementUI official documentation

Postscript:

This article is only for recording the problems encountered in the work, and pure original, Baidu has no reference, just write this article. If you have similar needs, please refer to this article!