vue2前端项目想要使用form-create创建不同的模板,如何在form-create里添加添加表格啊
在 form-create
中添加表格可以通过使用官方提供的 fc-table
组件来实现。
具体步骤如下:
fc-table
模块npm install fc-table --save
import fcTable from 'fc-table'
export default {
components: {
fcTable
},
//...
}
form-create
的 item
中使用 fc-table
组件添加如下代码段,即可在表单中添加一个具有分页和排序功能的表格:
{
type: 'fc-table',
prop: 'tableData',
itemProps: {
style: {
padding: '0 10px'
}
},
options: {
columns: [
{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age',
sortable: true
},
{
title: '地址',
key: 'address',
sortable: true
}
],
data: [],
rowKey: 'id',
pagination: {
current: 1,
pageSize: 10
}
}
}
其中,options
对象中的 columns
数组定义了表格的列,data
数组定义了表格的数据源,rowKey
定义了每一行数据的唯一标识符,pagination
定义了分页的初值。在表单提交时,表格中的数据会随表单数据一同提交。