好的，以下是使用
Avue 生成
vue 代 查询表单并表单中能编辑表单内数据显示成表格形式的示例代码：
```
vue
<template>
<div>
<
avue-form
:rule="rule"
:option="option"
:labelWidth="100"
:inputWidth="200"
@submit="handleSubmit"
/>
<
avue-table
:data="tableData"
:columns="columns"
:action="action"
:option="option"
:pagination="pagination"
/>
</div>
</template>
<script>
export default {
data() {
return {
rule: {
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
},
option: {
submitBtn: { show: true, text: '查询' },
resetBtn: { show: true, text: '重置' }
},
tableData: [],
columns: [
{ label: '姓名', prop: 'name', width: 100, edit: true },
{ label: '年龄', prop: 'age', width: 100, edit: true },
{ label: '地址', prop: 'address', width: 200, edit: true }
],
action: {
edit: { show: true, disabled: false, text: '编辑' },
delete: { show: true, disabled: false, text: '删除' },
custom: [{ show: true, disabled: false, text: '保存', event: 'save' }]
},
pagination: { show: true, pageSize: 10, current: 1, total: 0 }
}
},
methods: {
handleSubmit(data) {
// 向后台发起数据查询请求
// 然后将查询结果赋值给 tableData
this.tableData = [
{ name: '张三', age: 20, address: '北京市海淀区' },
{ name: '李四', age: 25, address: '上海市浦东新区' },
{ name: '王五', age: 30, address: '广州市天河区' }
]
this.pagination.total = this.tableData.length
},
handleAction(event, row, index) {
if (event === 'save') {
// 向后台发起数据保存请求
// 然后提示保存成功
this.$message.success('保存成功')
}
}
}
}
</script>
```
在这个示例代码中，我们使用
Avue 的
avue-form 组件生成了一个查询表单，然后使用
avue-table 组件将查询结果以表格形式展示出来。在
avue-table 组件中，我们设置了表格的列信息和操作信息，其中列信息中的 edit 属性设置为 true，表示该列可以编辑。当用户点击表格中的保存按钮时，我们会触发一个自定义事件，并向后台发起数据保存请求。
2648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
