x-vue-element-table

Introduction

X-vue-element-table is a component based on element-ui's secondary encapsulation, further encapsulating the table component in element-ui, reducing the amount of code code redundancy, making users more focused on the development of data modules, easier to use etc...

中文说明

x-vue-element-table 是基于 element-ui 的二次封装的组件，进一步封装了 element-ui 中table组件，减少了代码代码冗余量，使用户更加着重于数据模块的开发，更加简洁

使用递归组件和slot插槽进一步抽离了 el-table 中的 el-table-column 组件，并集成了el-table 的排序、展开行、多级表头、添加其他组件等功能，在其基础上有所改动

Install

npm  install x-vue-element-table --save

Usage

// register the plugin on vue
// first of all, you should add the components library of element-ui, because of the plugin baseed on this library
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

import xVueEleTable from 'x-vue-element-table'
Vue.use(xVueEleTable)

template

// you can use like this in your component
 <x-table :tableData="table.data" :tableKey="table.key" :isExpand="isExpand" :isExpandOnly="isExpandOnly" :sortObj="sortObj" :isCheckbox="isCheckbox" :maxHeight="maxHei" ref="p_table">
      <template slot="column">
        <x-table-col :tKey="table.key" v-for="(item, key) in table.key" :item="item" :key="key">
          <template slot="date" slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
          <template slot="operate" slot-scope="scope">
            // ...
          </template>
        </x-table-col>
      </template>
      <template slot="expand" slot-scope="props">
       //...
      </template>
    </x-table>

js

    export default {
        data () {
            return {
                // table data, include table-body data and the properties of column
                table: {
                  key: [{
                    label: '日期', 
                    value: 'date', 
                    template: true, 
                    isSortable: true, 
                    width: 180
                  }, {
                    label: '姓名', 
                    value: 'name', 
                    template: true, 
                    width: 180
                  }, {
                    label: '地址',
                    value: 'address', 
                    template: false,
                    child: [{
                        label: '省份', 
                        value: 'province', 
                        template: false, 
                        isSortable: true, 
                        width: 120
                    }, {
                        label: '市区', 
                        value: 'city', 
                        template: false, 
                        width: 120
                    }, {
                        label: '详细地址', 
                        value: 'detail', 
                        template: false, 
                        width: 220
                    }]
                  }, {
                    label: '操作', 
                    value: 'operate', 
                    template: true,
                    width: 300
                  },
                    // more data ...
                    ],
                  data: [{
                    date: '2016-05-02',
                    name: '王小虎',
                        province: '上海',
                city: '普陀区',
                detail: '金沙江路 1518 弄',
                    address: '上海市普陀区金沙江路 1518 弄'
                  }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                city: '普陀区',
                detail: '金沙江路 1517 弄',
                    address: '上海市普陀区金沙江路 1517 弄'
                  }]
                },
                sortObj: {prop: 'date', order: 'descending'},
                isExpand: true,
                isExpandOnly: true,
                isCheckbox: true,
                maxHei: 350
            }
            },
        methods: {
               handleEdit(index, row) {
                console.log(index, row);
                        // some do ...
               },
               handleDelete(index, row) {
                console.log(index, row);
                        // some do ...
               }
                }
          }

ps: about some properties, you can see element-ui#table

All Good Now you have this cool toast in your project..

demo

x-vue-element-table

All Good Now you have this cool toast in your project..