conf table form lib

conf-table-form-lib

Use

install

yarn add conf-table-form-lib

or

npm install conf-table-form-lib

main.js

 import Vue from 'vue'
import ConfTableForm from 'conf-table-form-lib'

Vue . use ( ConfTableForm )
// ...

page.vue

 < div >
  < XForm :config =" formConfig " />
  < XTable :config =" tableConfig " />
</ div >

< script >
export default {
  computed : {
    formConfig ( ) {
      return { // .... }
    } ,
    tableConfig ( ) {
      return { // .... }
    }
  }
}
</ script > 

Option

 {
  // Vue 组件 props
  props : {
    name : 'wayne' // 等同于 <component :name="wayne" />
  } ,

  // Vue 组件事件句柄
  on : {
    click : this . handlerXxx // 等同于 <component @click="handlerXxx" />
  } ,

  // 自定义指令
  directives : {
    // ...
  } ,
  
  // 普通的 HTML 特性
  attrs : {
    placeholder : '请输入' // 等同于 <component placeholder="请输入" />
  } ,
  
  // Dom 事件句柄
  nativeOn : {
    click : this . handlerXxx // 等同于 <component @click.native="handlerXxx" />
  } ,
  
  // class 属性
  class : { ... } ,
  
  // style 属性
  style : { ... } ,
  
  // 同 Vue 组件 :key
  key : { ... } ,
  
  // 同 Vue 组件 ref
  ref : { ... } ,
  
  // 同 slot
  slot : { ... } ,
  
  // DOM 属性
  domProps : { ... } ,
  
  // 嵌套组件的父组件 例如：select
  $parent : option ,
  
  // 嵌套组件的子组件 例如：option
  $children : [ option . . . ] ,
  
  // innerText
  $text : 'xxx'
}

option中除了以上列出的key其他均預設為props 。

屬性名以$開頭不會被處理為props ，預留使用。

具體參考Vue 資料對象

範例

Online demo.

Config see example.

table config

table 配置結構：

 {
  // <el-table ...option />
  table : option ,

  // <el-table-column ...option />
  // 嵌套表头 option 使用 $colums: [option, ...]
  // option.formatter 可使用 jsx 渲染 table cell
  colums : [ option ] ,

  // <el-pagination>
  pagination : option
}

form config

form 配置結構：

 {
    // <el-form ...option/>
    form : option ,

    // 表单项配置
    items : [
      {
        // 表单 item 类型 input、select、radio、checkbox ...
        type : 'input' ,

        // <el-form-item ...option />
        config : option ,

        // <el-col ..option>
        //   <component ...>
        // </el-col>
        container : option

        // <el-input ...option />
        component : option
      } ,

      // Group 组件配置
      {
        type : 'checkboxGroup' ,
        // ...

        component : {
          $parent : option ,
          $children : [ option ]
        }
      } ,

      // component 为函数时可定义 jsx 函数渲染
      // 需要在当前函数作用域前定义 h = vue.createElement
      {
        component : function ( ) {
          return < xxx />
        }
      }
      // ...
    ] ,

    // 组件 style
    style : {
      // <el-form :style="styleObj">
      form : styleObj ,

      // ...
      formItem : styleObj ,
      container : styleObj ,
      component : styleObj
    }
 }