本文介绍了如何在Vue应用中动态地向表格中插入输入框并进行数据编辑。通过`addData`方法添加带有编辑状态的新行，使用`editData`切换编辑模式，`confirmAdd`用于验证并保存编辑，`deleteData`则删除表格数据。同时展示了相关的表单验证规则。
{ {scope.row.name}}
男
女
男
女
添加数据
提交
export default {
// https://blog.csdn.net/weixin_43753330/article/details/89963135
name: "demo",
data() {
return {
formData: {
tableData: [],
},
rules: {
name: {
required: true,
message: '请输入名字',
},
sex: {
required: true,
message: '请选择性别',
},
},
}
},
methods: {
//添加
addData() {
this.formData.tableData.push({
edit: true,
});
},
//确认添加
confirmAdd(row, formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
最低0.47元/天 解锁文章
4265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
