Repository: kinglisky/egrid
Branch: master
Commit: 00c30bc50284
Files: 20
Total size: 26.2 KB

Directory structure:
gitextract_dudo1v5z/

├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── dev/
│   ├── App.vue
│   ├── cell-btn.vue
│   ├── cell-editor.vue
│   ├── data.js
│   └── main.js
├── docs/
│   ├── .nojekyll
│   ├── README.md
│   └── index.html
├── index.html
├── package.json
├── rollup.config.js
├── src/
│   ├── index.js
│   ├── main.vue
│   ├── methods.js
│   └── text.js
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [
    ["env", { "modules": false }]
  ]
}


================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
dist/
lib/
npm-debug.log
yarn-error.log

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2017 青鲤锦时

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Egrid

### 基于 `Element-UI` `Table` 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。

element 升级到了 2.0 了， 不用担心可以无缝升级的~

文档 [http://kinglisky.github.io/egrid](http://kinglisky.github.io/egrid)


### 开发

> `npm run dev`

> `npm run build`

> `npm run doc`


### 使用

安装 Element：

> `npm i element-ui -S`

安装 egrid:

> `npm i egrid -S`

`egrid` 只依赖 `Element` 中的 `Table` 与 `TableColumn` 组件不会将整个 `Element` 导入。
但不包含样式，`Table` 的样式需要用户手动引入。

使用：
```javascript
import Vue from 'vue'
import Egrid from 'egrid'

// table 的样式需要手动引入
import 'element-ui/lib/theme-default/icon.css'
import 'element-ui/lib/theme-default/table.css'
import 'element-ui/lib/theme-default/table-column.css'





Vue.use(Egrid)
```

为什么要在 element table 组价之上再封装一层呢？

平时我们使用的 element table 时候往往是这样写的：

```html
<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template scope="scope">
        <el-icon name="time"></el-icon>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag>{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template scope="scope">
        <el-button
          size="small"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
```

如果每次使用表格都要重复这一段代码，那久而久之你的项目肯定会冗余很多重复的代码，而且也不利于维护。
这时候我们就有必要在原始的表格组件基础上再封装一层，将这些重复的代码放在组件内部，使用时考虑如何通过一种配置的方式去定制表格。

`egrid` 就是为此而生的，少写两行是两行。耶~~~




================================================
FILE: dev/App.vue
================================================
<template>
  <div id="app">
    <egrid stripe
      max-height="500"
      :data="data"
      :columns="columns">
    </egrid>
    <egrid ref="egrid" stripe
      :column-type="['expand', 'selection']"
      :column-type-props=columnTypeProps
      :column-key-map="{ label: 'name' }"
      max-height="500"
      :data="data"
      :columns="columns"
      :columns-schema="columnsSchema"
      :columns-handler="columnsHandler"
      @selection-change="selectionChange">
      <template slot="expand" slot-scope="{ row }">
        <section class="expand-detail">
          <div v-for="col in columns" :key="col.label">
            {{ col.name }}：{{ row[col.prop] }}
          </div>
        </section>
      </template>
    </egrid>
    <button @click="clearSelection">CLEAR</button>
  </div>
</template>

<script>
import Vue from 'vue'
// import Egrid from '../lib/index.com'
import Egrid from '../src/index'
import Data from './data'
import Btn from './cell-btn.vue'
import Editor from './cell-editor.vue'
export default {
  name: 'app',
  data () {
    this.columnTypeProps = {
      selection: {
        // reserveSelection: true,
        selectable (row, index) {
          return index < 2
        }
      }
    }
    return {
      data: Data.data,
      columns: Data.columns,
      // columnsProps 用于定义所有 columns 公共的属性，
      // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
      // columnsProps: {
      //   width: 120,
      //   sortable: true,
      //   // 定义表格列如何渲染
      //   component: Editor
      // },

      // columnsSchema 可以用来单独定义 columns 的某一列，这里的设置会覆盖 columnsProps 的配置属性
      columnsSchema: {
        '地址': {
          width: 'auto',
          // propsHandler 可用于转换传给自定义组件的 props
          propsHandler ({ col, row }) {
            return { address: row[col.prop] }
          },
          component: Vue.extend({
            props: ['address'],
            render (h) {
              return h('span', {
                style: { color: '#20A0FF' }
              }, this.address)
            }
          })
        },
        '邮编': {
          formater (row, col) {
            return row[col.prop] + '...'
          }
        }
      },
      selecetedRows: []
    }
  },

  methods: {
    // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
    columnsHandler (cols) {
      return cols.concat({
        // fixed: 'right',
        label: '操作',
        align: 'left',
        component: Btn,
        // listeners 可用于监听自定义组件内部 $emit 出的事件
        listeners: {
          'row-edit' (row) {
            console.log('row-edit', row)
          }
        }
      })
    },

    selectionChange (rows) {
      this.selecetedRows = rows
      console.log('selected', rows)
    },

    clearSelection () {
      const { egrid } = this.$refs
      if (egrid && egrid.clearSelection) {
        egrid.clearSelection()
      }
    }
  },

  components: { Egrid }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding: 50px 60px;
}

.expand-detail div {
  text-align: left;
  padding: 4px 0;
}
</style>


================================================
FILE: dev/cell-btn.vue
================================================
<template>
  <button @click="todo">{{ row._edit ? 'Done' : 'Edit' }}</button>
</template>

<script>
export default {
  props: ['row', 'column'],

  methods: {
    todo () {
      this.$emit('row-edit', this.row)
      this.$set(this.row, '_edit', !this.row._edit)
    }
  }
}
</script>



================================================
FILE: dev/cell-editor.vue
================================================
<template>
  <div>
    <input
      v-show="row._edit" type="text"
      v-model="row[column.property]">
    <span v-show="!row._edit">{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: ['row', 'column'],

  computed: {
    text () {
      return this.row[this.column.property]
    }
  }
}
</script>



================================================
FILE: dev/data.js
================================================
export default {
  data: [
    {
      date: '2016-05-03',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-02',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-04',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-01',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-08',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-06',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    },
    {
      date: '2016-05-07',
      name: '王小虎',
      province: '上海',
      city: '普陀区',
      address: '上海市普陀区金沙江路 1518 弄',
      zip: 200333
    }
  ],
  columns: [
    { name: '日期', prop: 'date' },
    { name: '姓名', prop: 'name' },
    { name: '省份', prop: 'province' },
    { name: '市区', prop: 'city' },
    { name: '地址', prop: 'address' },
    { name: '邮编', prop: 'zip' }
  ]
}


================================================
FILE: dev/main.js
================================================
import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App.vue'
// 1.4.12
// import 'element-ui/lib/theme-default/index.css'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})


================================================
FILE: docs/.nojekyll
================================================


================================================
FILE: docs/README.md
================================================
# Egrid

基于 `Element-UI` `Table` 组件封装的高阶表格组件，可无缝支持 element 的 table 组件。

min 文件仅 3.8 kb。实现比较简单，源码在这： [https://github.com/kinglisky/egrid](https://github.com/kinglisky/egrid)

element 升级到了 2.0 了， 不用担心可以直接用。

首先组件依赖 `Element Table`，先要安装 Element：

> `npm i element-ui -S`

安装 egrid:

> `npm i egrid -S`

!> `egrid` 只依赖 `Element` 中的 `Table` 与 `TableColumn` 组件不会将整个 `Element` 导入。
但不包含样式，`Table` 的样式需要用户手动引入。

使用：

```javascript
import Vue from 'vue'
import Egrid from 'egrid'

// table 的样式需要手动引入
import 'element-ui/lib/theme-default/icon.css'
import 'element-ui/lib/theme-default/table.css'
import 'element-ui/lib/theme-default/table-column.css'

Vue.use(Egrid)
```

在线栗子🌰 ：
<iframe width="100%" height="400"
  src="//jsfiddle.net/nlush/yr0uf0fm/98/embedded/result,html,js,css/" allowfullscreen="allowfullscreen" frameborder="0">
</iframe>

先创建表格中使用的自定义组件：

`cell-btn.vue`
```html
<template>
  <button @click="todo">{{ row._edit ? 'Done' : 'Edit' }}</button>
</template>

<script>
export default {
  props: ['row', 'col'],

  methods: {
    todo () {
      this.$emit('row-editor', this.row)
      this.$set(this.row, '_edit', !this.row._edit)
    }
  }
}
</script>
```

`cell-editor.vue`
```html
<template>
  <div>
    <input
      v-show="row._edit" type="text"
      v-model="row[col.prop]">
    <span v-show="!row._edit">{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: ['row', 'col'],

  computed: {
    text () {
      return this.row[this.col.prop]
    }
  }
}
</script>
```

使用 `egrid`:

```html
<template>
  <egrid border
    max-height="500"
    column-type="selection"
    :data="data"
    :columns="columns"
    :columns-schema="columnsSchema"
    :columns-props="columnsProps"
    :columns-handler="columnsHandler"
    @selection-change="selectionChange">
  </egrid>
</template>

<script>
import Data from './data'
import Btn from './cell-btn.vue'
import Editor from './cell-editor.vue'

export default {
  data () {
    return {
      data: Data.data,
      columns: Data.columns,
      // columnsProps 用于定义 columns 公共的属性
      columnsProps: {
        width: 120,
        sortable: true,
        // 定义表格列如何渲染
        component: Editor
      },

      // columnsSchema 可以用来单独定义 columns 的某一列，这里的设置会覆盖 columnsProps 的配置属性
      columnsSchema: {
        '地址': {
          width: 'auto',
          // propsHandler 可用于转换传给自定义组件的 props 这里将 props 变成了 address
          propsHandler ({ col, row }) {
            return { address: row[col.prop] }
          },
          // 这里的 props 是 address
          component: Vue.extend({
            props: ['address'],
            render (h) {
              return h('span', {
                style: { color: '#20A0FF' }
              }, this.address)
            }
          })
        }
      }
    }
  },

  methods: {
    // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
    columnsHandler (cols) {
      return cols.concat({
        label: '操作',
        align: 'left',
        component: Btn,
        // listeners 可用于监听自定义组件内部 $emit 出的事件
        listeners: {
          'row-edit' (row) {
            console.log('row-edit', row)
          }
        }
      })
    },

    selectionChange (rows) {
      console.log('selected', rows)
    }
  }
}
</script>
```


# Attributes

!> `egrid` 只是在 `Element Table` 封装了一层，原本设置在 `Table` 上的 `props` 与事件监听可直接设置到 `egrid` 上，如：`height` `max-height` `border` `@selection-change`......具体配置可参考[Element Tabel 文档](http://element.eleme.io/#/zh-CN/component/table#table-attributes)

| 属性   | 说明 | 可选项 | 默认 |
| ---   | ---- | --- | --- |
| `data` | `Array` table 的 data 属性 | - | `[]` |
| `columns` | `Array` 用于控制表格列渲染 | - | `[]` | 
| `column-type` | `[String, Array]` 映射到 `Element Table-column` 的 `type` 属性，用于支持功能特殊的功能列（多选、索引、折叠行），不设置则不显示功能列 | `selection/index/expand` | - |
| `column-key-map` | `Object` 用于映射 `Table-column` 中 `label` 与 `prop` 值对应的 key | - | `{ label: 'label', prop: 'prop' }` |
| `columns-props` | `Object` 用于定义所有 `columns` 公共的 `Element Table-column` 属性  | - | - |
| `columns-schema` | `Object` 可以用来单独定义 `columns` 的某一列，这里的设置会覆盖 `columnsProps` 的配置属性 <br> 使用 `Element Table-column` 中 `label` 值进行匹配 | - | - |
| `columns-handler` | `Function` 可用于在现有的 `columns` 进行操作，对 `columns` 进行增删改操作。 | - | - |
| `slot-append` | `Boolean` 是否使用 `Element Table` 的 `slot="append"` | `true/false` | `false` |


> columns 配置

columns 用于控制表格的列行为，使用时一般会设置成：

```javascript
const columns = [
  {
    label: '日期',
    prop: 'date',
    width: 100
    ...
  },
  {
    label: '姓名',
    prop: 'name',
    minWidth: 100
    ...
  },
  {
    label: '其他',
    component: Btn, // 'el-button'
    listeners: {
      'custom-event' (data) {
        console.log('custom-event', data)
      }
    },
    propsHandler: function ({ row, col, column }) {
      return { row, col, column }
    }
    ......
  }
  ......
]
```

`columns` 中每项的配置项其实就是 `Element Table-column` 上的 `props` 属性，具体的属性设置可以参考 [Element Table-column 文档](http://element.eleme.io/#/zh-CN/component/table#table-column-attributes)。

在此基础上 `columns` 新增了 `component` `listeners` `propsHandler` 配置属性。当然你也可以自定义一些其他的属性附加到 `columns` 上以便后期自定组件中使用，例如附加一些处理函数传递给自定义组件使用。

`component`
用于配置当前列渲染用的自定义组件，内部使用 `<component>` 实现的，component 的值可以是：`string | ComponentDefinition | ComponentConstructor` 具体参考 [<component> 组件文档](https://cn.vuejs.org/v2/api/#component)


`listeners`
用于监听 `component` 配置的自定义渲染组件内部 `$emit` 出的事件，这里使用 Vue 2.4 引入 `v-on` [新语法](https://cn.vuejs.org/v2/api/#v-on)，可直接为 `v-on` 绑定一个对象，如：
```javascrip
v-on="{ 'custom-event': function (data) {...} }"
```

`propsHandler`

用于转化 `egrid` 组件内部附加 `<component>` 上的 props 。默认的附加在 `<component>` 上的 props 是：

```html
<component v-bind="{ row, col, column }" :is="col.component"></component>
```

可通过 `propsHandler` 对 `{ row, col, column }`  进行转化你想要的形式：

```javascript
propsHandler({ row, col, column })

// 转化成 =>

{
  msg: row[col.prop],
  handler (data) {
    console.log('handler:', data)
  }
}

```
> columns-props 配置

`columns-props` 配置用于定义 `columns` 各列默认的 props 属性。如所有的列默认都**居左对齐**，**不支持排序**，我们可以将 columns-props 设置成：

```javascript
{
  align: 'left',
  sortable: false
}
```
如需要为某些列单独定义显示行为可以通过 `columns-schema` 进行单独配置。

> columns-schema 配置

`columns-schema` 主要用于单独定义某一列的行为。

```javascript
{
  '地址': {
    width: 300,
    sortable: false,
    ...
    component: CustomComponent
  }
}

```

`columns-schema` 是通过 columns 每列的 `label` 属性值来匹配的。这里的配置属性会覆盖 `columns-props` 与 `columns` 设置的对应的列的属性值。

!> 覆盖的优先级为 `columns-schema` > `columns` > `columns-props`

> columns-handler 配置

`columns-handler` 处理函数可以对已有的 `columns` 进行增删改操作，常见的用法就是为，`columns` 新增一个自定义的操作列：

```javascript
// :columns-handler="columnsHandler"
columnsHandler (cols) {
  return cols.concat({
    label: '操作',
    align: 'left',
    sortable: false,
    ...
    component: OperatComponent,
  })
}
```
> column-type 配置

映射到 `Element Table-column` 的 `type` 属性，用于特殊的功能列的功能，不设置则不显示功能列。

* `selection`： 多选支持

* `index`： 编号索引

* `expand`： 表格支持折叠展开行 

当 `column-type` 为 `expand` 时表格支持折叠展开行，此时可用通过 `slot (slot="expand")` 方式自定渲染折叠详情。

当 `column-type` 为数组时可设置多个特殊列，`['expand', 'index', 'selection']`，一般很少这样使用。

使用可参考下面的栗子🌰 ：

<iframe width="100%" height="600"
src="//jsfiddle.net/nlush/azr14zfs/45/embedded/result,html,js,css/"
allowfullscreen="allowfullscreen" frameborder="0">
</iframe>

> `column-key-map` 配置

考虑到 `columns` 中的 `label` 项与 `prop` 项对应的属性 key 不一定是 `label` 与 `prop`，这时可以通过 `column-key-map` 做个映射。



# Methods

```javascript
[
  'setCurrentRow',
  'toggleRowSelection',
  'toggleRowExpansion',
  'clearSelection',
  'clearFilter',
  'clearSort',
  'doLayout',
  'sort'
]
```

!> 直接代理一层原 `Element Table` 的方法。可参考[文档](http://element.eleme.io/#/zh-CN/component/table#table-methods)


# Slots

`append`：对应 `Element Table` 的 `slot="append"` [可参考文档](http://element.eleme.io/#/zh-CN/component/table#table-slot)，使用时注意设置 `slot-append` 为 `true`

`expand`： 当 `column-type` 为 `expand` 时使用，用于自定义折叠展开内容。





================================================
FILE: docs/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>egrid - element-ui table packaging</title>
  <meta name="description" content="element-ui table 组件">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
</body>
<script>
  window.$docsify = {
    name: 'Egrid',
    search: 'auto',
    loadSidebar: false,
    repo: 'https://github.com/kinglisky/egrid',
    formatUpdated: '{MM}/{DD} {HH}:{mm}'
  }
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</html>


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>temp</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>


================================================
FILE: package.json
================================================
{
  "name": "egrid",
  "description": "element-ui table packaging component",
  "version": "1.1.2",
  "author": "芊野 <free.nan.sky@gmail.com>",
  "private": false,
  "repository": {
    "type": "git",
    "url": "git@github.com:kinglisky/egrid.git"
  },
  "main": "lib/index.com.min.js",
  "scripts": {
    "clear": "rm -rf lib",
    "doc": "docsify serve docs",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "npm run clear && node rollup.config.js"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-helpers": "^6.24.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015-rollup": "^3.0.0",
    "cross-env": "^5.1.3",
    "css-loader": "^0.28.8",
    "docsify": "^4.5.7",
    "file-loader": "^1.1.6",
    "rollup": "^0.55.3",
    "rollup-plugin-babel": "^3.0.3",
    "rollup-plugin-commonjs": "^8.2.6",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-uglify": "^2.0.1",
    "rollup-plugin-vue2": "^0.8.0",
    "style-loader": "^0.19.1",
    "uglify-es": "^3.3.4",
    "url-loader": "^0.6.2",
    "vue": "^2.5.13",
    "vue-loader": "^13.6.2",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "peerDependencies": {
    "element-ui": "^2.0.10"
  }
}


================================================
FILE: rollup.config.js
================================================
const rollup = require('rollup')
const vue = require('rollup-plugin-vue2')
const resolve = require('rollup-plugin-node-resolve')
const babel = require('rollup-plugin-babel')
const uglify = require('rollup-plugin-uglify')
const ug = require('uglify-es')
const babelHelpers = require('babel-helpers')
const externalHelpersWhitelist = babelHelpers.list.filter(helperName => {
  return helperName !== 'asyncGenerator'
})
const plugins = [
  vue(),
  resolve({
    extensions: ['.js', '.vue']
  }),
  babel({
    exclude: 'node_modules/**',
    plugins: ['external-helpers'],
    externalHelpersWhitelist
  })
]

const config = {
  name: 'Egrid',
  entry: './src/index.js',
  dist: 'lib/index'
}

const pkgs = [
  { format: 'cjs', suffix: '.com.js' },
  { format: 'cjs', suffix: '.com.min.js', min: true },
  { format: 'es', suffix: '.esm.js' },
  { format: 'es', suffix: '.esm.min.js', min: true },
  { format: 'umd', suffix: '.umd.js' },
  { format: 'umd', suffix: '.umd.min.js', min: true }
]

pkgs.forEach(runRollup)

function runRollup (it) {
  rollup.rollup({
    input: config.entry,
    external: ['vue', 'element-ui/lib/table', 'element-ui/lib/table-column'],
    plugins: it.min ? plugins.concat(uglify({}, ug.minify)) : plugins
  })
  .then(bundle => {
    bundle.write({
      format: it.format,
      name: config.name,
      globals: {
        'vue': 'Vue',
        'element-ui/lib/table': 'ELEMENT.Table',
        'element-ui/lib/table-column': 'ELEMENT.TableColumn'
      },
      file: config.dist + it.suffix
    })
  })
  .catch(e => {
    console.log(`${it.format} - 打包出错：`, e)
    process.exit(1)
  })
}


================================================
FILE: src/index.js
================================================
import Main from './main.vue'
import methods from './methods'
Main.install = function (Vue) {
  Vue.component(Main.name, Main)
}
Main._mixinsMethods = methods
export default Main


================================================
FILE: src/main.vue
================================================
<template>
  <el-table class="egrid"
    :data="data" ref="grid"
    v-bind="tableBind"
    v-on="$listeners">
    <template v-for="tp in typesColumns">
      <el-table-column 
        v-if="tp.type === 'expand'"
        v-bind="tp.props"
        type="expand"
        :key="tp.type">
        <template slot-scope="props">
          <slot name="expand" v-bind="props"></slot>
        </template>
      </el-table-column>
      <el-table-column v-else
        :key="tp.type"
        :type="tp.type"
        v-bind="tp.props">
      </el-table-column>
    </template>
    <el-table-column v-for="col in renderColumns"
      :key="col.label" v-bind="getColBind(col)">
      <template slot-scope="scope">
        <component :is="col.component"
          v-bind="getCptBind(scope, col)"
          v-on="col.listeners">
        </component>
      </template>
    </el-table-column>
    <template v-if="slotAppend" slot="append">
      <slot name="append"></slot>
    </template>
  </el-table>
</template>

<script>
import ElTable from 'element-ui/lib/table'
import ElTableColumn from 'element-ui/lib/table-column'
import methods from './methods'
import Text from './text'

const BOOLEAN_KEYS = [
  'fit',
  'stripe',
  'border',
  'show-header',
  'highlight-current-row',
  'default-expand-all',
  'show-summary'
]

const COLUMN_PROPS = {
  align: 'left',
  component: Text
}

const TYPES = ['selection', 'expand', 'index']

const COLUMN_KEY_MAP = {
  label: 'label',
  prop: 'prop'
}

export default {
  name: 'Egrid',

  mixins: [methods],

  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    },

    columns: {
      type: Array,
      default () {
        return []
      }
    },

    columnType: [String, Array],

    columnTypeProps: Object,

    columnKeyMap: Object,

    columnsProps: Object,

    columnsSchema: Object,

    columnsHandler: Function,

    slotAppend: Boolean
  },

  computed: {
    // 处理 $attrs 里面 Boolean 类型的 prop 和统一 prop 命名 
    tableBind () {
      const { $attrs } = this
      const bind = {}
      Object.keys($attrs).forEach(key => {
        const v = $attrs[key]
        const uniformKey = key.replace(/([A-Z])/, '-$1').toLowerCase()
        bind[key] = ~BOOLEAN_KEYS.indexOf(uniformKey) && v === '' ? true : v
      })
      return bind
    },

    renderColumns () {
      const {
        columns,
        columnKeyMap,
        columnsHandler,
        columnsProps: props,
        columnsSchema: schema
      } = this
      const map = Object.assign({}, COLUMN_KEY_MAP, columnKeyMap)
      const renderColumns = columns.map(col => {
        const mix = schema && schema[col[map.label]] || {}
        const it = Object.assign({}, COLUMN_PROPS, props, col, mix)
        it.label = it[map.label]
        it.prop = it[map.prop]
        return it
      })
      return columnsHandler && columnsHandler(renderColumns) || renderColumns
    },

    // 用于渲染特殊列
    typesColumns () {
      const { columnType: type, columnTypeProps } = this
      let typeColums = []
      if (typeof type === 'string' && ~TYPES.indexOf(type)) {
        typeColums = [type]
      }
      if (Array.isArray(type)) {
        typeColums = type.filter(it => ~TYPES.indexOf(it))
      }
      const map = columnTypeProps || {}
      return typeColums.map(type => {
        return {
          type,
          props: map[type]
        }
      })
    }
  },

  methods: {
    getColBind (col) {
      const bind = Object.assign({}, col)
      delete bind.component
      delete bind.listeners
      delete bind.propsHandler
      return bind
    },

    getCptBind ({ row, column }, col) {
      const props = { row, col, column }
      const handler = col.propsHandler
      return handler && handler(props) || props
    }
  },

  components: {
    [ElTable.name]: ElTable,
    [ElTableColumn.name]: ElTableColumn
  }
}
</script>


================================================
FILE: src/methods.js
================================================
const METHOD_NAMES = [
  "setCurrentRow",
  "toggleRowSelection",
  "toggleRowExpansion",
  "clearSelection",
  "clearFilter",
  "clearSort",
  "doLayout",
  "sort"
]

const methods = {}

METHOD_NAMES.forEach(name => {
  methods[name] = function (...args) {
      const { grid } = this.$refs
      if (grid && grid[name]) { 
          grid[name](...args)
      }
  }
})

export default { methods }


================================================
FILE: src/text.js
================================================

export default {
  functional: true,
  props: ['row', 'col', 'column'],
  render (h, { props: { row, col }, _v: text }) {
    const { formater } = col
    const v = formater && formater(row, col) || row[col.prop]
    // 解决 umd 打包 text 渲染不出来的问题，需要转成 Vnode
    return text && text(v) || v
  }
}


================================================
FILE: webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './dev/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}