基於vue-elment-ui的一款表格設計器table-making

簡介

如果你的項目中有很多的表格,即使用elment-ui table插件你也必須每次都必須寫一遍代碼進行開發,如果你使用過表單設計器,你就會希望能得到一款像form表單設計器一樣可以通過拖拽配置快速生成一個表格,table-making就是一款不錯的表格設計器。參照form-making的源碼,並可以集成進form-making中配合表單或其他可視化工具中使用快速設計出表格,並且可以在vue項目中渲染。
該插件包含兩個重要組件
TableMaking 表格設計器
GenerateTable 表格渲染器

gitHub地址

table-making

演示地址

table-making

使用教程

安裝

npm install table-making

由於該項目使用了自定義代碼編輯器monaco-editor,該工具打包後代碼量稍大分割後有多個文件,項目中按需加載需要在引入該插件的工程中進行webpack配置 即在vue.config.js文件中增加如下插件CopyWebpackPlugin的配置(如何安裝CopyWebpackPlugin及配置請自行學習)

    plugins: [
      new CopyWebpackPlugin(
      
        [
          {
            context: 'node_modules/table-making/dist/',
            from: '*.js',
            to: process.env.NODE_ENV === 'development' ? './':'static/js',
            toType: 'dir'
          },
          {
            context: 'node_modules/table-making/dist/',
            from: '*.css',
            to: process.env.NODE_ENV === 'development' ? './':'static/js',
            toType: 'dir'
          },
        ]
    )
  ]

項目中如何使用

完整引用

import TableMaking from 'table-making'
import 'table-making/dist/TableMaking.css'

Vue.use(TableMaking)

以上代碼便完成了 TableMaking 的引入。需要注意的是,樣式文件需要單獨引入。

另外該項目實現了i18國際化如果你的項目也支持i18國際化,則請用一下方式引入組件,注意如果你的工程中有多個插件都支持國際化就必須在主工程中以以下方式引入

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh-CN', // 定義默認語言爲中文 
  messages: { },//主工程的語言包,可以爲空
});
//註冊table-macking
Vue.use(TableMaking, { lang: 'zh-CN', locale: null, i18n: i18n})
//其他組件必須傳入i18對象引入否則將會將上一個組件的語言包覆蓋

引入部分組件

import {
  GenerateTable,
  MakingTable
} from 'table-making'
import 'table-making/dist/TableMaking.css'

Vue.component(GenerateTable.name, GenerateTable)
Vue.component(MakingTable.name, MakingTable)
/* 或寫爲
 * Vue.use(GenerateTable)
 * Vue.use(MakingTable)
 */

引入 ace.js

如果你需要在設計器中預覽表格,默認情況下沒有引入ace.js,如果需要使用ace.js,需要自己引入

<!-- 需要在設計器中預覽代碼需要引入ace.js庫 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

頁面中使用組件

1.設計器tabkeMaking的使用

    <fm-making-table v-show="activeName == 'config'" ref="makingtable" style=" min-height: calc(100vh - 100px);" preview generate-code generate-json>
      <template slot="action">
      </template>
    </fm-making-table>

效果
在這裏插入圖片描述

1.渲染器GenerateTable的使用

<template>
  <div>
    <fm-generate-form 
      :data="jsonData" 
      @on-change="onChange"
      :value="formData"
      ref="generateForm"
    >
    </fm-generate-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      jsonData: {
	  "list": [],
	  "config": {
	    "labelWidth": 100,
	    "labelPosition": "right",
	    "size": "small"
	  }
}
  },
  methods: {
    onChange (field, value) {
      if (field == 'name') {
        this.formData.show = value
      }
    }
  }
}
</script>

jsonData 數據即是上一步表格設計器生成的數據

效果
在這裏插入圖片描述

關於組件詳細使用教程持續更新中

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章