赞
踩
需求:table表格支持可编辑,并且有确定,取消,编辑,删除事件。确定和去取消为一组,编辑和删除为一组,点击确定后input框为不可编辑状态,同时操作栏显示编辑和删除按钮。点击编辑时input为可输入状态,点击取消时需要回显上一次写的数据。删除则从table中删除当前编辑的行。
前端效果:
1点击添加时,table表格出来一列
2输入数据后,点击确定,操作列出现编辑,删除,input框为不可编辑状态
3点击编辑时,对应的列为可输入状态
4点击取消回显上一次写的数据:点击添加-输入数据-点击确定,点击编辑-输入数据-点击取消-回显点击确定之前的的数据。
代码实现:
<div style="width: 100%"> <el-button @click="add" type="text" size="small" icon="CirclePlus">添加</el-button> </div> <el-table border :data="form.infoList" style="width: 100%"> <el-table-column prop="id" label="序号" width="50" type="index" align="center" :index="index=>index+1"/> <el-table-column prop="name" label="姓名" align="center"> <template #default="scope"> <span v-show="!scope.row.editFlag">{{scope.row.name}}</span> <el-input v-show="scope.row.editFlag" v-model="scope.row.name"> </el-input> </template> </el-table-column> <el-table-column prop="age" label="年龄" align="center"> <template #default="scope"> <span v-show="!scope.row.editFlag">{{scope.row.age}}</span> <el-input v-show="scope.row.editFlag" v-model="scope.row.age"> </el-input> </template> </el-table-column> <el-table-column label="操作" width="120" align="center"> <template #default="scope"> <div style="display: flex;"> <el-button size="small" type="text" icon="CircleCheck" v-show="scope.row.editFlag" @click="submit(scope.row)">确定 </el-button> <el-button size="small" type="text" icon="CircleClose" v-show="scope.row.editFlag" @click="cancel(scope.row,scope.$index)">取消 </el-button> <el-button size="small" icon="Edit" type="text" v-show="!scope.row.editFlag" @click="edit(scope.row)"> 编辑 </el-button> <el-button size="small" icon="Delete" type="text" v-show="!scope.row.editFlag" @click="del(scope.row.$index)">删除 </el-button> </div> </template> </el-table-column> </el-table>
//点击添加
const add = () => {
form.value.infoList.push({
'name': '',
'age': '',
'editFlag': true, // 可编辑标识
'isSubmit': false, // 是否点击确定标识
})
};
// 确定 const submit= (row) => { row.editFlag = false row.isSubmit = true }; // 取消 const cancel = (row, index) => { row.editFlag = false if (row.isSubmit) { form.value.infoList[index] = v.value } else { delVersion(index); } } // 编辑 const editVersion = (row) => { v.value = JSON.parse(JSON.stringify(row)); row.editFlag = true; }; // 删除 const delVersion = (index) => { form.value.infoList.splice(index, 1) };
然后就可以实现上面的需求了,有问题加v 876942343
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。