vue+elementui实现可编辑表格

项目需求表格的内容显示和修改框切换显示
如图所示，点击修改按钮切换到输入框和选择框
点击前：

点击后：

1.首先先定义一个变量用来控制span和input的显示隐藏，因为点击按钮只能修改该行数据，所以要给每行一个index作为标识
tem

<el-table-columnprop="rectPeriod"header-align="center"align="center"label="整改期限"width="180"><template slot-scope="{row,$index}">   //注意此处要写为row，写成scope会报错<span v-if="!showEdit[$index]">{{row.rectPeriod}}</span>  //用showEdit[$index]来控制显示隐藏<el-date-pickerv-model="rectPeriod[$index]"   //此处用$index来区分每行不同的日期选中值type="date"placeholder="选择日期"v-if="showEdit[$index]"value-format="yyyy-MM-dd"></el-date-picker></template>
</el-table-column>

export default {data(){return {//控制修改显示隐藏showEdit:[],//用来存储日期选中值rectPeriod:[]}},methods:{}
}

2.然后给修改按钮绑定点击事件，点击修改时showEdit[$index]为true
tem

<el-table-column
header-align="center"
align="center"
width="200"
label="操作"><template slot-scope="{row,$index}"><el-button v-if="!showEdit[$index]" @click="showUpdate($index,row)">修改</el-button><el-button v-if="showEdit[$index]" @click="submit(row)">确定</el-button><el-button v-if="showEdit[$index]" @click="cancelUpdate($index)">取消</el-button></template>
</el-table-column>

export default {data(){return {//控制修改显示隐藏showEdit:[],//用来存储日期选中值rectPeriod:[]}},methods:{//点击修改showUpdate(index,row){if(row.rectPeriod){this.rectPeriod[index] = row.rectPeriod    //回显}else {this.rectPeriod[index] = ''}this.showEdit[index] = true;this.$set(this.showEdit,index,true)   //这里要用$set方法，否则页面状态不更新},}
}

3.再给取消按钮和确定按钮绑定事件
tem

<el-table-column
header-align="center"
align="center"
width="200"
label="操作"
v-if="isAuth('govemment:rectification:update')"><template slot-scope="{row,$index}"><el-button v-if="!showEdit[$index]" @click="showUpdate($index,row)">修改</el-button><el-button v-if="showEdit[$index]" @click="submit($index,row)">确定</el-button><el-button v-if="showEdit[$index]" @click="cancelUpdate($index)">取消</el-button></template>
</el-table-column>

export default {data(){return {//控制修改显示隐藏showEdit:[],//用来存储日期选中值rectPeriod:[]}},methods:{//点击修改showUpdate(index,row){this.showEdit[index] = true;this.$set(this.showEdit,index,true)   //这里要用$set方法，否则页面状态不更新},//取消修改cancelUpdate(index){this.$confirm('取消修改？','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(()=>{this.$set(this.showEdit,index,false) }).catch(() => {})},//提交修改submit(index,row){//发送请求，隐藏输入框this.$http({url: this.$http.adornUrl('/trouble/update'),method: 'post',params: this.$http.adornParams({'id':row.id,   'rectPeriod':this.rectPeriod[index],})}).then(({data})=>{if (data && data.code === 0) {this.$message({message: '操作成功',type: 'success',duration: 1500,onClose: () => {this.$set(this.showEdit,index,false)}})} else {this.$message.error(data.msg)}})},}
}

关键代码都在前两步，我写的好啰嗦啊，凑活看吧

vue+elementui实现可编辑表格相关推荐

Vue - ElementUI中循环渲染表格，控制字段的显示与隐藏 v-if与v-for同时使用
在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正常使用),因为Vue中是不提倡v-for与v-if同时使用的. 在我的项目中也遇到了问题不过翻看文档解决 ...
vue element-ui动态横向统计表格
表格结构 <el-table:data="AllData"style="width: 100%"><el-table-columnprop=& ...
Vue + ElementUI el-table动态生成表格(表头含有中文、英文、数字等)，表头宽度自适应实现
表格html片段 <section class="w-full h-786 overflow-auto"><div class="right-table ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...
Handsontable VUE+element-ui +handsontable 实现Excel复制文本到项目表格列表（基于Elemenet+handsontable）
@VUE封装handsontable(仿写Element样式)-重点查看使用方法 #Handsontable VUE+element-ui 实现Excel复制文本到项目表格列表(基于Elemenet) ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
vue element项目常见实现表格内部可编辑功能
目录前言正文 1.简单表格行内内部可编辑 2. 数据从后端取得表格行内可编辑 3.批量表格整体的可编辑结语前言后台系统都是各种表格表单编辑,整理了下常见的几种实现表格编辑的方式,希望有用.使 ...
ElementUI table组件，表格组件，单击单元格可编辑逻辑
ElementUI table组件,表格组件,单击单元格可编辑逻辑 1.表格部分 <el-table:data="seatDataFilter"@cell-click=&qu ...

vue+elementui实现可编辑表格

vue+elementui实现可编辑表格相关推荐

最新文章

热门文章