书接上文, vue的表单需求中我是如何偷懒的, 今天咱们来说说 列表 的需求中, 我们如何封装一个高可用的 vTable 组件来简化我们的工作.
如上图, 是一个很常规的页面需求, 我们来拆分下, 包括
- 表单搜索
- 本质上为一个表单, 可以复用
vForm
- 本质上为一个表单, 可以复用
- 批量操作按钮
- 页面级的常规按钮
- 表格主体
- 表头
- 表头提示
- 排序
- 列表单元格
- 类型, 文本/图片/标签/HTML/JSON/富文本等等
- 行操作按钮
- 表头
- 批量操作及批量选中提示
- 分页
如上的需求我们可以一行代码搞定吗? 可以在之后所以的表单需求中复用吗?
当然是可以的
<v-table info-api="/tabel_schema/example" />
接口下发的内容, 我们称之为 tableSchema
查看本例的tableSchema
{
"filter":[
{
"field":"name",
"type":"input",
"label":"姓名"
},
{
"field":"sex",
"type":"select",
"label":"性别",
"options":[
{
"value":1,
"label":"男"
},
{
"value":0,
"label":"女"
}
]
}
],
"headers":[
{
"field":"name",
"label":"姓名",
"info":"表头提示"
},
{
"field":"sex",
"type":"enum",
"label":"性别",
"options":[
{
"value":1,
"label":"男"
},
{
"value":0,
"label":"女"
}
],
"state":{
"0":"warning",
"1":"info"
},
"props":{
"sortable":true
}
},
{
"field":"github",
"type":"link",
"label":"主页"
},
{
"field":"html",
"type":"html",
"label":"HTML"
},
{
"field":"image",
"type":"image",
"label":"头像"
},
{
"field":"json",
"type":"json",
"label":"信息"
},
{
"field":"richText",
"type":"rich-text",
"label":"信息"
}
],
"batchButton":[
{
"type":"jump",
"text":"跳转",
"target":"http://github.com/daodao97"
},
{
"type":"api",
"text":"请求接口",
"api":{
"method":"POST",
"url":"/test_api"
}
},
{
"type":"table",
"text":"表格",
"table":{
"infoApi":"/student/list_info",
"listApi":"/student/list"
},
"props":{
"type":"info"
}
},
[
{
"type":"jump",
"text":"跳转",
"target":"http://github.com/daodao97"
},
{
"type":"api",
"text":"请求接口",
"api":{
"method":"POST",
"url":"/test_api"
}
}
],
{
"type":"form",
"text":"表单",
"form":{
"infoApi":"/form",
"saveApi":"/save"
},
"props":{
"type":"success"
}
}
],
"rowButton":[
{
"type":"form",
"form":{
"infoApi":"/user/{id}",
"saveApi":"/user/{id}"
},
"props":{
"icon":"el-icon-edit",
"type":"success"
}
},
{
"type":"api",
"api":{
"method":"POST",
"url":"/student/{id}"
},
"props":{
"icon":"el-icon-delete",
"type":"danger"
}
}
],
"normalButton":[
{
"type":"jump",
"text":"跳转",
"target":"http://github.com/daodao97"
},
{
"type":"api",
"text":"请求接口",
"api":{
"method":"POST",
"url":"/test_api"
}
},
{
"type":"table",
"text":"表格",
"table":{
"infoApi":"/student/list_info",
"listApi":"/student/list"
},
"props":{
"type":"info"
}
},
[
{
"type":"jump",
"text":"跳转",
"target":"http://github.com/daodao97"
},
{
"type":"api",
"text":"请求接口",
"api":{
"method":"POST",
"url":"/test_api"
}
}
],
{
"type":"form",
"text":"表单",
"form":{
"infoApi":"/form",
"saveApi":"/save"
},
"props":{
"type":"success"
}
},
{
"type":"jump",
"target":"/user/form",
"props":{
"icon":"el-icon-plus",
"type":"primary"
}
}
],
"selectedNotice":"当前共勾选: {selectedCount} 条",
"listApi":"/user/list"
}
同样的套路, 我们将组建的渲染配置, 抽象出来, 交由后端下发, 此后我们就可以借助可视化工具轻松的创建N多表单了.
当然在一个成熟的 表单 组件中还有很多细节, 我们可以在这里 rock-admin/table 找到更详细的文档.
也可以在 github/rock-admin 查看源码
