Vue+Element实现表格的编辑、删除、以及新增行
程序员文章站
2022-04-25 07:51:52
...
方案一、原生表格
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:''
})
},
}
推荐阅读
-
vue+element实现表格新增、编辑、删除功能
-
Vue+Element实现表格编辑、删除、以及新增行的最优方法
-
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
-
一个可以增加和删除行的table并可编辑表格中内容
-
jQuery通过点击行来删除HTML表格行的实现示例
-
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
-
Vue+Element实现表格编辑、删除、以及新增行的最优方法
-
vue+element实现表格新增、编辑、删除功能
-
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
-
vue+element创建动态的form表单.以及动态生成表格的行和列