在Vue2和Element UI中，可以通过使用el-form组件来实现表单编辑，并使用el-table组件来展示和编辑表格内的数据。以下是一个简单的例子，展示了如何嵌套这两个组件，并实现行内编辑及表单项计数。
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="商品列表">
<el-button type="text" @click="addRow">添加商品</el-button>
<el-table :data="form.items" style="width: 100%;">
<el-table-column prop="name" label="商品名称">
<template slot-scope="scope">
<el-input v-model="scope.row.name"></el-input>
</template>
</el-table-column>
<el-table-column prop="price" label="商品价格">
<template slot-scope="scope">
<el-input v-model="scope.row.price"></el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" @click="removeRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
items: [
{ name: '', price: '' }
]
}
};
},
methods: {
addRow() {
this.form.items.push({ name: '', price: '' });
},
removeRow(index) {
this.form.items.splice(index, 1);
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
alert('提交成功!');
} else {
alert('表单验证失败!');
return false;
}
});
}
}
};
</script>在这个例子中，我们有一个包含姓名和商品列表的表单。商品列表可以通过点击添加商品按钮来增加行，每行都可以编辑商品名称和价格。提交表单时，会触发表单验证。如果验证通过，会弹出一个提示框表示提交成功，如果失败则会显示失败信息。这个例子展示了如何在Vue2和Element UI中处理嵌套表单和表格编辑的基本方法。