vue-bel-table

Description

A vue table component that base on element ui.Just for using el-table component more convenient。

对element的table组件进行了封装，更方便地使用elment ui的el-table组件

Dependency

Installation

 npm install vue-bel-table

Usage

import BelTable from 'vue-bel-table'
Vue.use(BelTable, options)

Options

options: {
      table: Object, // 自定义table默认属性，必须为element ui支持的表格属性
      column: Object // 自定义列默认属性，必须为element ui支持的列属性
}
// 如果不传递，默认属性如下
// 组件内的默认配置如下
table: {  // table的默认属性
    data: [],
    maxHeight: 600,
    border: true
},
column: { // column的默认属性
      showOverflowTooltip: true,
      headerAlign: 'center',
      resizable: true
}

Props

data: Array, // 表格的数据，1.1.0 新增，如果存在，configs中的attr的中可以不存在data属性
configs: Object
// configs的具体配置如下
configs: {
   table: {  // 表格配置
     default: {}, // 默认配置，配置属性要跟element ui的table attributes 一致，如果有配置，则忽略组件内defaultAttr的table默认配置
     attr: {} // 配置属性要跟element ui的table attributes一致
   },
   columnDefault: {}, // column的默认配置，要跟element ui的column attributes一致，如果有配置，则忽略defaultAttr的column默认配置
   columns: [  // column配置
     {
       attr: {}, // column的默认配置，要跟element的column attributes一致
       scopedSlot: '', // scope slot名称
     }
   ]
 }

events

跟element ui 的 events 一致

Table Methods

跟element ui 的table methods 一致

example

1.1.0后更推荐这样使用：

<template>
    <bel-table
      ref="table"
      @row-click="toggleRowSelection"
      :data="tableData"
      :configs="tableConfig">
      <template slot="date" scope="scope">
        <span>{{scope.row.date}}</span>
      </template>
    </bel-table>
</template>
<script type="text/babel">
  export default {
    data () {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        tableConfig: {
          get () {
            return {
              columns: [
                {
                  attr: {
                    type: 'selection',
                    width: 80,
                    align: 'center'
                  }
                },
                {
                  attr: {
                    prop: 'date',
                    label: '日期',
                    minWidth: 180,
                    scopedSlot: 'date',
                  }
                },
                {
                  attr: {
                    prop: 'name',
                    label: '姓名',
                    minWidth: 180
                  }
                },
                {
                  attr: {
                    prop: 'address',
                    label: '地址',
                    minWidth: 180
                  }
                }
              ]
            }
          }
        }
      }
    },
    methods: {
      toggleRowSelection (row) {
        this.$refs.table.toggleRowSelection(row)
      }
    }
  }
</script>

1.1.0以前的使用方式，1.1.0以后的版本同样兼容

<template>
    <bel-table
      ref="table"
      @row-click="toggleRowSelection"
      :configs="tableConfig">
      <template slot="date" scope="scope">
        <span>{{scope.row.date}}</span>
      </template>
    </bel-table>
</template>
<script type="text/babel">
  export default {
    data () {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    computed: {
      tableConfig: {
        get () {
          return {
            table: {
              attr: {
                data: this.tableData
              }
            },
            columns: [
              {
                attr: {
                  type: 'selection',
                  width: 80,
                  align: 'center'
                }
              },
              {
                attr: {
                  prop: 'date',
                  label: '日期',
                  minWidth: 180,
                  scopedSlot: 'date',
                }
              },
              {
                attr: {
                  prop: 'name',
                  label: '姓名',
                  minWidth: 180
                }
              },
              {
                attr: {
                  prop: 'address',
                  label: '地址',
                  minWidth: 180
                }
              }
            ]
          }
        }
      }
    },
    methods: {
      toggleRowSelection (row) {
        this.$refs.table.toggleRowSelection(row)
      }
    }
  }
</script>