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>