Vue+Element实现表格的编辑、删除、以及新增行

方案一、原生表格

1、页面效果

2、实现

3、定义

addRow:[{configInfo:{fieldEnglishName:'',fieldChineseName:'',totalType:'',fieldLength:'',isNotNull:'',primaryKey:'',remark:'',isNotSelected:'0'}}],

方案二、element表格

1、页面效果

2、实现

<el-button type="primary" plain icon="el-icon-circle-plus-outline" size="small" @click="addRow(infiledList)">添加</el-button>
     <el-table :data="infiledList">
        <el-table-column  prop="url" label="文件上传" >
           <el-upload
             ref="proPic"
             class="upload-demo"
             :action="upload.url"
             :headers="upload.headers"
             :on-preview="handlePreview"
             :on-remove="handleRemove"
             :file-list="fileList"
             :limit="1"
             :on-progress="onProgress"
             :on-success="handleFileSuccess"
             :auto-upload="true"
             list-type="picture">
             <el-button size="small" type="primary">点击上传</el-button>
           </el-upload>
         </el-table-column>
          <el-table-column prop="nowName" label="新名称" >
             <template slot-scope="scope">
                 <el-input v-model="scope.row.nowName" clearable placeholder="请输新名称"></el-input>
             </template>
           </el-table-column>
           <el-table-column prop="accessoryType" label="附件类型" >
             <template slot-scope="scope">
                 <el-select class="width100" clearable v-model="scope.row.accessoryType" >
                     <el-option v-for="item in accessoryTypeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                 </el-select>
             </template>
           </el-table-column>
           <el-table-column  label="操作">
             <template slot-scope="scope">
                 <el-button plain type="danger" @click.native.prevent="deleteRow(scope.$index, infiledList)" size="small"> 移除 </el-button>
             </template>
           </el-table-column>

     </el-table>

3、定义

  infiledList:[],

methods:{
	//可追加的模块
    deleteRow(index, rows) {//删除改行
      console.log('删除行--',index, rows)
      rows.splice(index, 1);
    },
    addRow(tableData,event){
      console.log('添加行--',tableData,event)
       tableData.push({ nowName: '',accessoryType:''
      })
     },
}