README
v-from
Element和vue表单插件,实现table的查看添加,修改,
.----.
.'__ `.
.--(O) (O)--/ #\
.' @ / ##\
: ·...· , /####)
`-..__.-'_.- ### /
`:___:`
.' \
// start \\
// 成功! \\
`-.___ ___.-'
___`. | .'___
(______|______)
v-from(表单组件)
- props
props: {
options: {
type: Array //表单基础配置项:name,表单key值 lable 名称,
// type:1为input,
// 2为下拉selct,21下拉联动
// 3为多选框。。。,
// 4为table表
// 5为tree
//datalist为多选,下拉等等数据项参考ui库
},
formData: {
type: Object //表单提交的格式
},
rules: {
type: Object //表单检验规则
},
others: {
type: Object //其他扩展信息
}
- 使用:
<v-from
:options="options"
:others="others"
:formData="ruleForm"
:rules="rules"
@success="success"
@close="close"
></v-from>
参数详细说明
- options:
options: [
{
name: "hostName",
label: "名称",
type: 1,
readonly: false,
disabled: false
},
{
name: "chainType",
label: "链类型",
type: 21,
readonly: false,
disabled: false,
dataList: [
// { label: "FISCO", value: "fisco" },
],
event:true,
api:[findOrgByChainType],//下来联动回调接口,待开发
},
{
name: "id",
label: "主键id",
type: 1,
readonly: false,
disabled: false,
show: false
}
]
- name:表单提交的key值
- label:表单label值
- type:表单项的类型
- 1为input,2为下拉selct,21下拉联动,3为多选框。。。,4为table表,5为tree
<el-select v-show="false" v-model="ruleForm[item.name]" multiple></el-select>//存储树形用的数组,特殊标签
<el-tree :data="item.dataList" show-checkbox node-key="id" ref="tree" @check-change="getNodes(item.name)" :default-expanded-keys="item.extends.expanded"
:default-checked-keys="item.extends.checked"
:props="item.extends.defaultProps">
</el-tree>
- readonly:是否只读
- disabled:是否禁用
- dataList:为多选,下拉等表单项的单元集合
- event:是否存在联动回调
- api:联动回调的接口。类型为array
- show:此表单项是否展示
注意事项:dataList,extends为渲染数据结构,参考elementUI各类组件
ruleForm:{ nodeName: "", description: "", chainType: "", id: "", } 表单提交项与options的name匹配使用
rules:检验规则参考elementUI
others:
api:提交表单接口
title:标题
type:add新增,modify更新,details查看详情
v-table(表格组件)
- props:
props: {
listData: {
type: Array //表单信息[{name:'zhangsan',age:18},{name:'lishi',age:20}]
},
headerList: {
type: Array //表单头部信息[{value:"name",label:"姓名"},{value:"age",label:"年龄"}] enName为key值,lable为头部信息
}
},
- 使用:
<v-table :listData="listData":headerList="headerList"></v-table>
- 效果:
姓名 | 年龄 |
---|---|
zhang san | 20 |
li si | 18 |