page-template v1.0.4

page-template

a page-template project ( base on element-ui ), a json schema drive form, table, template-page project

attention

this project is base on element-ui, make sure your project add element-ui and sass loader

installation

with npm or yarn

yarn add page-template
npm i -S page-template

base component

it has two base component BaseForm and BaseTable

how to use it

use BaseForm

   import { BaseForm } = from 'page-template'

   <base-form :config='config'><base-form/>

    const formDemo = {
      layout: 'inline', // control form layout inline or vertical
      formConfig: [     // form-item params
        {
          formType: 'input',
          label: '姓名',
          name: 'name',
          initialValue: '小明',
          placeholder: ''
        },
        {
          formType: 'datepicker',
          label: '日期',
          name: 'time',
          initialValue: new Date(),
          placeholder: '',
          type: 'date'
        },
        {
          formType: 'select',
          label: '年龄',
          name: 'age',
          placeholder: '',
          initialValue: 12,
          clearable: true,
          options: [
            {
              label: '1是法撒旦法师法',
              value: 12
            },
            {
              label: '撒旦法撒旦法洒洒地方13',
              value: 13
            },
          ]
        },
        {
          formType: 'radio',
          label: '性别',
          name: 'sex',
          placeholder: '',
          initialValue: '0',
          group: [
            {
              label: '男',
              value: '1'
            },
            {
              label: '女',
              value: '0'
            }
          ]
        },
        {
          formType: 'textarea',
          label: '介绍',
          name: 'desc',
          placeholder: ''
        },
        {
          formType: 'button',
          btnDes: '查询',
          prop: 'desc',
          clickCallback:function (self){
            console.log(self);  // self is form component
          }
        },
      ]
    }

use BaseTable

   import { BaseTable } = from 'page-template'

    <base-table :data="tableData" :table-config="tableConfig"/>

    const tableData = [
      {
        index: 1,
        id: 123123,
        companyName: 'fdb',
        createTime: '2101-08-09 13:23'
      }
    ]
    const tableConfig = {
        tableProp:{
                border:true
              },
        column:[
          {
            prop: 'index',
            label: '序号',
            fixed: false,
            align: 'center',
            width: 80
          },
          {
            prop: 'id',
            label: '公司ID',
          },
          {
            prop: 'companyName',
            label: '公司名称'
          },
          {
            prop: 'createTime',
            label: '添加时间',
            align: 'center'
          }
        ],
        pagination: {
          current: 0,
          size: 10,
          total: 0,
          sizeChange: (size) => {
            const params = {
              page: 1,
              size: size
            }
          },
          currentChange: (currentPage) => {
            const params = {
              page: currentPage,
              size: 1
            }
          }
        }
    }