Dynamic-table-y NPM

dynamic-table-y

简介
根据JSON数据生成表格，同时配置有查询，删除，表单新增，编辑的功能。同时可以在设计页面进行表单组件位置的排放及属性调整。请将生成的Json放到Parser中预览。

安装

npm install dynamic-table-y --save

使用

// main.js import { DynamicTable, Parser } from 'dynamic-table-y' Vue.component(DynamicTable.name , DynamicTable) Vue.component(Parser.name, Parser)

DynamicTableY表格(表单)设计器

属性	描述	类型	默认值
ymodelId	模型ID，用来获取表格行字段, 展示出可配置的表格	String	Number	undefined
yuniKey	配置完成后组件的标识唯一，用来获取完整的JSON数据	String	undefined

desgin.vue
<template>
  <div style="height:100%">
    <DynamicTable
      :ymodel-id="modelId"
      :yuni-key="uniKey"
    />
  </div>
</template>

<script>
import preview from './perview.vue'
export default {
  name: 'EasyTablea',
  components: {
    preview
  },
  data() {
    return {
      modelId: 2,
      uniKey: 'dddd_eijiofds'
    }
  },
  created() {
    
  }

}

Parser解析器（使用TS + JSX编写）

属性	描述	类型	默认值
tableConfigLocal	获取到的表格基础字段	String	Number	undefined
renderForm	是否渲染表单的控制开关	Boolean	false
permissionButtons	权限控制列表，权限标识符的格式如下所示，具体情况安装实际项目调整	Array	[]
formListConfig	表单JSON数据,renderForm为true,这个字段必须传	JSON	-

preview.html
<template>
  <div>
    <Parser 
      :table-config-local="tableConfig" 
      :render-form="renderForm" 
      :form-list-config="formListConfig" 
      :model-id="modelId" 
      :permission-buttons="permissionButtons"
    />
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'DynamicPreview',
  props: {
    uniKey: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      permissionButtons: ['projectName:tableName:typeName', 'myapp:user:index', 'myapp:dashbord:delete' ],
      loading: false,
      tableConfig: {},
      dialogVisible: true,
      renderForm: false,
      formListConfig: {},
      modelId: undefined
    }
  },
  created() {
    this.loading = true
    后端数据格式为:
    const data = {
      table: {},
      form: {},
      modelId: {}
    }
    this.tableConfig = data.table
    this.modelId = data.modelId
    const formd = data.form
    if (formd) {
      this.renderForm = true
      this.formListConfig = formd
    }
  }
}
</script>

component vue form element-ui auto