vue-form-table

介绍

基于element-ui的el-form和el-table做的二次封装
仓库地址：https://gitee.com/ziyuan_xcc/vue-form-table
组件说明文档：https://shimo.im/docs/Pg3WWJpYr6PJHjqh

示例

在这里插入图片描述

<template>
  <div class="demo">
    <div>
      <h1>myForm</h1>
      <my-form :data="data" :form="form" :rules="rules"></my-form>
    </div>
    <div>
      <h1>TreeGrid</h1>
      <tree-grid :columns="tableHeader" :dataSource="tableData" :info="tableInfo" :loading="loading"></tree-grid>
    </div>
  </div>
</template>

<script>

  import myForm from '@/components/form/myForm'
  import TreeGrid from '@/components/TreeGrid'

  export default {
    name: 'demo',
    components: {myForm, TreeGrid},
    data () {
      return {
        data: [
          {model: 'name', label: '姓名', type: 'input'},
          {model: 'height', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1},
          {model: 'sex', label: '性别', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}]}
        ],
        form: {name: '', sex: 0, height: ''},
        rules: {},
        loading: false,
        tableHeader: [
          {titleName: '111', fieldName: 'a'},
          {titleName: '222', fieldName: 'b'},
          {titleName: '333', fieldName: 'c'}
        ],
        tableData: [
          {a: 1, b: 31, c: 4},
          {a: 53, b: 31, c: 4},
          {a: 23, b: 32, c: 4}
        ],
        tableInfo: {pageNum: 1, pageSize: 10, total: 3}
      }
    }
  }
</script>