vue element项目常见实现表格内部可编辑功能

目录
前言
正文
1.简单表格行内内部可编辑
2. 数据从后端取得表格行内可编辑
3.批量表格整体的可编辑
结语
前言
后台系统都是各种表格表单编辑，整理了下常见的几种实现表格编辑的方式，希望有用。使用框架：vue+element

表格行内内部可编辑
数据从后台取得的表格行内可编辑
表格整体的可编辑
正文
1.简单表格行内内部可编辑
原理就是span 和 input 的切换显隐。

代码：

<template><div><el-table :data="tabledatas" border><el-table-column label="tab1"><template slot-scope="scope"><el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.tab1"></el-input><span v-show="!scope.row.show">{{scope.row.tab1}}</span></template></el-table-column><el-table-column label="tab2"><template slot-scope="scope"><el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.tab2"></el-input><span v-show="!scope.row.show">{{scope.row.tab2}}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="scope.row.show =true">编辑</el-button><el-button @click="scope.row.show =false">保存</el-button></template></el-table-column></el-table></div>
</template>
<script>export default {data() {return {tabledatas: [{ tab1: '111', tab2: '2222',show:true},{ tab1: 'aaa', tab2: 'bbb' ,show:false},],}},}
</script>

数据从后端取得表格行内可编辑
从后台取得的数据，可能没有show这个属性，所以在接收数据的时候操作一下，加这个属性，效果依然。但此时也会遇见保存时候需要把这个属性去掉，不影响传输正确数据。

代码：

<template><div><el-table :data="tabledatas" border><el-table-column type="selection"></el-table-column><el-table-column label="tab1"><template slot-scope="scope"><el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.tab1"></el-input><span v-show="!scope.row.show">{{scope.row.tab1}}</span></template></el-table-column><el-table-column label="tab2"><template slot-scope="scope"><el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.tab2"></el-input><span v-show="!scope.row.show">{{scope.row.tab2}}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="scope.row.show =true">编辑</el-button><el-button @click="scope.row.show =false">保存</el-button></template></el-table-column></el-table></div>
</template>
<script>export default {data() {return {tabledatas: [],}},created() {// 发请求去后台拿数据,如果有api，就正常请求，//我这里是demo，就简单给list赋值了，原理一样。// getlistApi().then(res => {// let list = res.data.listlet list = [{ tab1: 'tast2', tab2: 'tast333' },{ tab1: 'aaa', tab2: 'bbb' },]list.forEach(element => {element["show"] = false});this.tabledatas = list// })},}
</script>

3.批量表格整体的可编辑
效果图：

代码：

<template><div><el-button @click="show =true">编辑</el-button><el-button @click="show =false">提交</el-button><el-table :data="tabledatas" border><el-table-column label="tab1"><template slot-scope="scope"><el-input placeholder="请输入内容" v-show="show" v-model="scope.row.tab1"></el-input><span v-show="!show">{{scope.row.tab1}}</span></template></el-table-column><el-table-column label="tab2"><template slot-scope="scope"><el-input placeholder="请输入内容" v-show="show" v-model="scope.row.tab2"></el-input><span v-show="!show">{{scope.row.tab2}}</span></template></el-table-column></el-table></div>
</template>
<script>export default {data() {return {tabledatas: [{ tab1: '111', tab2: '2222' },{ tab1: 'aaa', tab2: 'bbb'},],show:false}},}
</script>

结语
这是编辑保存功能，下篇顺便写一下行内和批量删除和增加行的功能吧~
附：vue+element的表格最优实现单条和批量修改、保存、复制、删除、新增、提交数据功能

如果本文对你有帮助的话，请给我点赞打call哦~o(￣▽￣)ｄo
有其他问题留言 over~

vue element项目常见实现表格内部可编辑功能相关推荐

vue+element项目手机号、邮箱校验保姆级教程
vue+element项目手机号.邮箱校验保姆级教程 (包含注意点) 先看案例:在vue+element项目中给表单中的手机号和邮箱做校验标题先说注意点 prop黄色框框起来的一定要有废话不多 ...
Datatables实现表格行内编辑功能
表格行内编辑功能通过操作DOM来实现,最终实现效果如下代代码 html <table class="table table-striped table-bordered table-h ...
Vue + element项目搭建与使用
Vue项目搭建与使用新建vue项目引入 element 第一个请求(axios) vue路由 vue项目打包部署自定义组件 vuex入门 mockjs的使用新建vue项目 1.首先我们需要下载 ...
Vue+element 项目搭建
文章目录前言环境 vue -cli 项目创建改造一改造二改造三测试使用 elementui 安装 loader 测试总结前言最近有点小动作了,有两个项目需要推进,要把前端的玩意捡起 ...
vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查
以下代码可以直接复制使用一.情景: 列表是一个树状表格,可以无限添加下级,以及对列表的某一行进行增删改查(目前查没有写). 原博链接二.本篇是在原博主的代码基础上添加了部分功能. 功能1: 给树状 ...
Vue+Element项目实战系列-动态面包屑
面包屑应该是我们在项目中经常使用的一个功能,一般情况下它用来表示我们当前所处的站点位置,也可以帮助我们能够更快的回到上个层级. 今天我们就来聊聊如何在 Vue 的项目中实现面包屑功能.以下案例都是使用 ...
Vue+Element 项目实战（一）
目录相关资料今日目标 1.电商业务概述 2.项目初始化(必须先安装node.js) 3.码云相关操作 4.配置后台项目 5.实现登录功能补充相关资料项目所用到的资源点我下载项目源码 ht ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
Vue element怎么获取table表格当前行数据和索引值
怎么拿表格当前行数据平时我们在使用表格时通过template的slot-scope="scope",使用scope.row拿到当前行的数据 <el-table max-he ...

vue element项目常见实现表格内部可编辑功能

vue element项目常见实现表格内部可编辑功能相关推荐

最新文章

热门文章