v-from

Element和vue表单插件，实现table的查看添加，修改，

            .----.
          .'__     `.
      .--(O) (O)--/ #\
    .' @         /  ##\
    :   ·...·  ,  /####）
     `-..__.-'_.- ### /
           `:___:`
         .'        \
       //   start   \\
      //    成功!    \\
       `-.___ ___.-'
       ___`. | .'___
      (______|______)

v-from（表单组件）

1. 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 //其他扩展信息
    }

2. 使用：

<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（表格组件）

1. 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为头部信息
    }
  },

2. 使用：

  <v-table :listData="listData":headerList="headerList"></v-table>

3. 效果:

姓名 | 年龄 ------------- | ------------- zhang san | 20 li si | 18