欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-25 07:51:52
...

方案一、原生表格

1、页面效果

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

2、实现

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

3、定义

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

方案二、element表格

1、页面效果

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

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:''
      })
     },
}
相关标签: element vue