基于el-table实现行内增删改功能
更新时间:2024年04月01日 10:32:55 作者:@小匠
这篇文章主要介绍了基于el-table实现行内增删改功能,用过通过操作按钮点击删除或者编辑功能即可实现相应的效果,下面小编给大家分享实例代码感兴趣的朋友跟随小编一起看看吧
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
实现效果:
核心代码:
<el-table :data="items" style="width: 100%;margin-top: 16px" border :key="randomKey"> <el-table-column label="计划名称" property="name"> <template slot-scope="{row}"> <template v-if="row.edit"> <el-input v-model="row.name"></el-input> </template> <span v-else>{{ row.name }}</span> </template> </el-table-column> <el-table-column label="计划完成时间" property="executionDate" width="175"> <template slot-scope="scope"> <el-date-picker v-if="scope.row.edit" style="width: 153px;" type="date" v-model="scope.row.timeEnd"> </el-date-picker> <span v-else>{{ parseTime(scope.row.timeEnd) }}</span> </template> </el-table-column> <el-table-column label="协同人" property="leaderList"> <template slot-scope="scope"> <template v-if="scope.row.edit"> <el-select v-model="scope.row.leaderList" clearable filterable multiple> <el-option v-for="item in userList" :key="item.userId" :label="item.nickname" :value="item.userId"> </el-option> </el-select> </template> <span v-else>{{ scope.row.leaderName }}</span> </template> </el-table-column> <el-table-column label="执行人" width="80"> <template> <span>{{ $store.getters.name }}</span> </template> </el-table-column> <el-table-column align="center" label="操作" width="100"> <template slot-scope="{row,column,$index}"> <el-button v-if="row.edit" type="success" icon="el-icon-check" circle size="small" @click="confirmEdit(row)" > </el-button> <el-button v-if="row.edit" icon="el-icon-close" circle size="small" @click="cancelEdit(row)" > </el-button> <el-button type="primary" icon="el-icon-edit" circle v-if="!row.edit" size="small" @click="row.edit=!row.edit" > </el-button> <el-button type="danger" icon="el-icon-delete" circle size="small" @click="handleDelete($index)" v-if="!row.edit" > </el-button> </template> </el-table-column> </el-table> </div> <div style="display: flex;margin-top: 28px;justify-content: center;"> <el-button @click="addSon" size="small" icon="el-icon-plus">添加子计划</el-button> </div>
Method:
cancelEdit(row) { row.name = row.oldName row.leaderList = row.oldLeaderList row.timeEnd = row.oldTimeEnd row.leaderName = row.oldLeaderName row.edit = false this.$message({ message: '已恢复原值', type: 'warning' }) }, confirmEdit(row) { row.edit = false row.oldName = row.name row.oldLeaderList = row.leaderList row.oldTimeEnd = row.timeEnd let arr = [] row.leaderList.forEach(i => { let userName = this.userList.find(({userId}) => userId === i).nickname arr.push(userName) }) row.leaderName = arr.join() row.oldLeaderName = row.leaderName this.$message({ message: '修改成功', type: 'success' }) }, handleDelete(index) { this.items.splice(index, 1) }, addSon() { this.items.push({ name: null, timeEnd: null, leaderList: [], leaderName: null, edit: true }) },
到此这篇关于基于el-table实现行内增删改的文章就介绍到这了,更多相关el-table行内增删改内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!
相关文章
Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解
这篇文章主要介绍了在Vue中优雅的使用Echarts实现图表轮播图、Echarts图表组件封装、节流函数优化图表性能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧2023-01-01vue关于this.$refs.tabs.refreshs()刷新组件方式
这篇文章主要介绍了vue关于this.$refs.tabs.refreshs()刷新组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-03-03vue3如何添加eslint校验(eslint-plugin-vue)
这篇文章主要介绍了vue3如何添加eslint校验(eslint-plugin-vue),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
最新评论