vue+elementui实现可编辑表格

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

点击后：

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

<el-table-column
    prop="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-picker
	        v-model="rectPeriod[$index]"   //此处用$index来区分每行不同的日期选中值
	        type="date"
	        placeholder="选择日期"
	        v-if="showEdit[$index]"
	        value-format="yyyy-MM-dd">
        </el-date-picker>
    </template>
</el-table-column>

js

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>

js

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>

js

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)
                }
            })
        },
	}
}

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