# table-generator

**Repository Path**: cdsv/table-generator

## Basic Information

- **Project Name**: table-generator
- **Description**: 表格生成器
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-11-29
- **Last Updated**: 2021-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# table-generator

表格生成器

### 引用组件

- Element ^2.15.0

[前端常用的 UI 框架 https://element.eleme.cn/#/zh-CN](https://element.eleme.cn/#/zh-CN)

```shell script
npm i element-ui -S
```

- monaco-editor

[在线代码编辑器 https://microsoft.github.io/monaco-editor/](https://microsoft.github.io/monaco-editor/)

```shell script
npm install monaco-editor@0.21.2
```

- monaco-editor-webpack-plugin

monaco 在线编辑辅助控件（代码补全就是靠这个配置的）

```shell script
npm install monaco-editor-webpack-plugin -S
```

- 拖动插件

[sortable.js中文文档](http://www.itxst.com/sortablejs/neuinffi.html)

```shell script
npm install sortablejs --save
```

[vue.draggable中文文档](http://www.itxst.com/vue-draggable/tutorial.html)

```shell script
npm i -S vuedraggable
```

- Moment.js

[时间处理插件](http://momentjs.cn/)

```shell script
npm install moment --save
```

main.js引用

```javascript
// 引入时间格式转换工具
import moment from 'moment'
Vue.prototype.$moment = moment
```

- xe-utils

[xe-utils函数库](https://www.npmjs.com/package/xe-utils)

[xe-utils](https://x-extends.gitee.io/xe-utils/#/)

```shell script
npm install xe-utils
```

main.js引用
```shell script
import XEUtils from 'xe-utils'
Vue.prototype.$utils = XEUtils
```

- axios

发送接口请求工具

```shell script
npm install axios
```

- svg-sprite-loader

[vue配置svg 图标显示不出来](https://www.cnblogs.com/ljh--/p/13438681.html)

```shell script
npm install svg-sprite-loader --save-dev
```

使用
```javascript
import '@/icons'
```
在`icon`文件夹下

- vue-json-viewer

[vue-json-viewer](https://www.npmjs.com/package/vue-json-viewer)

```shell script
npm install vue-json-viewer --save
```

### 页码展示

- 默认

![默认](https://img-blog.csdnimg.cn/20210331144214384.png)

- 字典过滤数据

![列属性设置](https://img-blog.csdnimg.cn/20210331144143454.png)

- 增加筛选条件

![增加筛选条件](https://img-blog.csdnimg.cn/20210331144611824.png)

### 修改记录

##### 2021年4月1日

1. 完成代码在线编辑功能
2. 完成Gitee Pages部署

##### 2021年3月31日

1. 完成查询条件删除
2. 增加效果截图
3. 增加左侧选中状态

##### 2021年2月20日

1. 完成根据json格式生成表格数据
2. 完成表格列样式设置
3. 表格列属性设置完成

##### 2021年2月7日

1. 完成下拉选择组件
2. 完成时间选择组件
3. 时间段选择完成
4. 按钮条件完成
5. 换行和横线增加删除

##### 2021年2月3日

1. 完成input组件表单部分

##### 2021年2月2日

1. 初步完成增加筛选条件
2. 组件基本实现拖拽创建
3. 开始进行input表单填写

##### 2021年2月1日

1. 增加接口获取数据功能
2. 增加表格基本样式控制
3. 不能及时加载问题未解决

##### 2021年2月1日

1. 字典过滤完成
2. 删除字段完成

##### 2021年1月31日

1. 整理已有代码
2. 数据加载后展示
3. 时间过滤完成