vue+element-ui后台项目常用的基于e-table封装的多功能全局表格组件的方法

文档地址：
https://d2admin.fairyever.com/#/demo/d2-crud/demo1
使用方法：
1、github下载对应的代码文件
https://github.com/d2-projects/d2-crud
2、将下载下来的src文件中的文件拷贝到项目全局组件文件夹下面
3、在全局项目文件夹下index.js文件中引入组件和全局注册组件

import Vue from 'vue'
// 引入自己封装的公共组件
import d2crud from './d2-crud/d2-crud.vue'
// 全局注册公告组件
Vue.component(d2crud.name, d2crud)

4、在项目main.js文件中引入全局注册组件js

import Vue from 'vue'
import App from './App'
//引入element-ui框架
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
// 引人自己封装的全局注册的公共组件
import '@/components/index.js'

5、这个时候会报错，需要安装table组件所引入的依赖
在npm中安装

npm install --save lodash.clonedeep lodash.foreach lodash.get lodash.set

6、在项目使用的时候，直接按照官方文档说明就可以用了。

7、最后需要补充说明一点：
源文件中的主vue文件会报template错误，将中间出错的template修改为div就可以了。

8、报错$d2CrudSize
第三步和第四步的方式修改一下：
组件中的index.js

import Vue from 'vue'
// 引入自己封装的公共组件
// import ztable from './z-table' 废除
// 全局注册公告组件
// Vue.component(ztable.name, ztable)
import ztable from './d2-crud/d2-crud.vue'
// 全局注册公告组件
// Vue.component(d2crud.name, d2crud)
ztable.install = (vue, options) => {

  if (options) {
    Vue.prototype.$d2CrudSize = options.size ? options.size : null
  } else {
    Vue.prototype.$d2CrudSize = null
  }
  Vue.component('z-table', ztable)
}
export default ztable

项目的main.js

// 引人自己封装的全局注册的公共组件
// import '@/components/index.js'
import ztable from '@/components/index.js'
Vue.use(ztable)