# dynamic-table-y

> 基于Vue的表单设计器，让表单开发简单而高效

Latest version **1.1.5** (published 2020-12-24) · LGPL license · 0 weekly downloads

## Install

```sh
npm install dynamic-table-y
pnpm add dynamic-table-y
yarn add dynamic-table-y
bun add dynamic-table-y
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2020-12-24 |
| First published | 2020-12-04 |
| Weekly downloads | 0 |
| License | LGPL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 23 |
| Unpacked size | 27.8 MB |
| Known vulnerabilities | 0 (+27 in 4 direct dependencies) |
| Install scripts | no |
| Author | QinWei |
| Maintainers | littledevil |
| Keywords | component, vue, form, element-ui, auto |

## Links

- npm: https://www.npmjs.com/package/dynamic-table-y
- npm.io page: https://npm.io/package/dynamic-table-y

## Dependencies (23)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [mock](https://npm.io/package/mock.md) ^0.1.1
- [vuex](https://npm.io/package/vuex.md) ^3.1.1
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [qiniu](https://npm.io/package/qiniu.md) ^7.2.1
- [eslint](https://npm.io/package/eslint.md) ^6.8.0
- [mockjs](https://npm.io/package/mockjs.md) ^1.1.0
- [qiniu-js](https://npm.io/package/qiniu-js.md) ^2.5.1
- [tippy.js](https://npm.io/package/tippy.js.md) ^6.2.7
- [viewerjs](https://npm.io/package/viewerjs.md) ^1.2.0
- [clipboard](https://npm.io/package/clipboard.md) ^2.0.6
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.1
- [element-ui](https://npm.io/package/element-ui.md) 2.14.1
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.2
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [animate.css](https://npm.io/package/animate.css.md) ^3.7.2
- [vue2-editor](https://npm.io/package/vue2-editor.md) ^2.10.2
- [easy-table-a](https://npm.io/package/easy-table-a.md) ^1.0.0
- [vuedraggable](https://npm.io/package/vuedraggable.md) ^2.24.3
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.0
- [easy-table-parser](https://npm.io/package/easy-table-parser.md) ^1.0.0
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.3
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.4.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.5 (latest) — 2020-12-24
- 1.1.4 — 2020-12-24
- 1.1.2 — 2020-12-18
- 1.1.1 — 2020-12-18
- 1.1.0 — 2020-12-18
- 1.0.10 — 2020-12-17
- 1.0.9 — 2020-12-16
- 1.0.8 — 2020-12-16
- 1.0.7 — 2020-12-16
- 1.0.6 — 2020-12-16
- 1.0.5 — 2020-12-14
- 1.0.4 — 2020-12-07
- 1.0.3 — 2020-12-07
- 1.0.2 — 2020-12-04
- 1.0.1 — 2020-12-04
- … 1 more at https://npm.io/package/dynamic-table-y/versions

## README

## 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>
```

---
_Source: https://npm.io/package/dynamic-table-y · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._