@lozvoe/e-table v1.0.7

E-Table

基于Element UI 表格组件封装的

特点

• 数据化表格结构
• 自定义编辑单元格
• 自定义下拉筛选 （可获取远程数据显示）
• 快捷选择数据（支持快捷键ctrl和shift/alt）
• 保留elementui table原有功能

使用方式

• 安装

npm install @lozvoe/e-table 

npm install element-ui

• 引用

import Vue from "vue"
import ElementUI from "element-ui"
import ETable from "@lozvoe/e-table"

import "element-ui/lib/theme-chalk/index.css" 
import "@lozvoe/e-table/lib/e-table.css" 

Vue.use(ElementUI)
Vue.use(ETable)

• 简单例子

<template>
    <e-table
      :data="tableData"
      :columns="tableColumns">
   </e-table>
</template>

<script>
export default{
    data(){
        return {
            tableData:[{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }],
          columns:[{
              prop:'date',
              label:'日期',
              width:250
          },{
              prop:'name',
              label:'姓名',
              width:250
          },{
              prop:'address',
              label:'地址',
              width:250
          }]
        }
    }
}
</script>

多级表头只需要嵌套使用即可， 如：

 columns:[{
              label:'日期',
              childrens:[{
                  prop:'year',
                  label:"年份",
                  width: 200
              },{
                  prop:'month',
                  label:'月份',
                  width:100
              },{
                  label:'时间',
                  childrens:[{
                      prop:'day',
                      lable:'天',
                      width:100
                  }]
              }]   
          },{
              prop:'name',
              label:'姓名',
              width:250
          },{
              prop:'address',
              label:'地址',
              width:250
          }]    

这就是e-table的基本用法，可以看出来和el-table的区别就在于把el-table-column的插槽形式转化为了columns数组对象集合的形式。 所以他的书写格式只要把el-table-column上可配置项写成键值对插入到对应的columns数组对象中,就可以生效。所以这些属性就不一一列举, el-table上的属性一样可以直接写在e-table标签上。

• 分页例子

<template>
    <e-table
      :data="tableData"
      :pagination="paginationOpt"
      :columns="tableColumns"
      @pagination-current-change="pageChange"
    >
   </e-table>
</template>

<script>
export default{
    data(){
        return {
            paginationOpt:{ total:100 },

            tableData:[{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }],
          columns:[{
              prop:'date',
              label:'日期',
              width:250
          },{
              prop:'name',
              label:'姓名',
              width:250
          },{
              prop:'address',
              label:'地址',
              width:250
          }]
        }
    }
}
</script>

增加了一些属性，如下

config属性

增加事件

columns中增加的属性

slot 插槽

同el-table的插槽

filterComponent具体使用

<script>
import myComponent from "./myComponent.vue"

columns:[{
    prop:'custom',
    label:'自定义组件',
    filterComponent: myComponent,
    filterAttrs:{
        size:'mini',
        //...
    },
    filterListeners:{
        focus:(e)=>{
            //code
        },
        //...
      }
    },
]
</script>

你可以自定义下拉组件，和内置下拉筛选组件一样接受如下props，也可以通过filterAttrs增加属性，filterListeners可以接受你组件的事件响应。

• filters ：通过getfilters传入的数据
• filtedList ：当前已筛选数据（Array）
• column ：column对象
• columnObj ： columns里面的自身对象
• showPopover ： 下拉popover的显示状态 true/false

如果数据改变应当给父级相应一个事件，这样才能让内部知道你的数据变了，才能在e-filter-change获取你最新数据。

事件：this.$emit('filterChange',newValue,columnObj,column)

• filterChange： 事件名
• newValue: 最新的筛选数据
• columnObj：columns里面的自身对象

• column： column对象

  表格内部操作删除了筛选该列的数据时应做出响应，还有每次点击下拉筛选时应该保持数据一直，可以这样做（仅供参考）

• 实时监听是否已被筛选，可以使用computed计算，列如：

computed: {
        isFilted() {
            let colKey = this.column.columnKey || this.column.property || this.column.id
            if (this.filtedList.hasOwnProperty(colKey) && this.filtedList[colKey].value) {
                let value = this.filtedList[colKey].value;
                if (value.length == 0) {
                    return false
                }
                return true
            }
         return false
 }

• 监听下拉状态,新传入的filters,和isFilted,做出响应 用watch属性

 watch: {
        showPopper: {
            immediate: true,
            handler(n) {
                //做你自己的逻辑处理
            }
        },
        filters: {
            immediate: true,
            handler(n) {
                this.filterValues = [...n];  //filterValue 为你组件的绑定的值 
            }
        },
        isFilted(n) {
            if (!n) { //如果已经清除当前筛选状态
                this.reInit ? this.reInit() : null //reInit 为将你组件绑定的值初始化，例如为重置为 []
            }
        }
    }

为什么不直接将filtedList直接作为绑定值有如下原因

• 每个组件可能绑定的默认值类型不一样 而filtedList为方面操作全部转为Array
• 会直接操作修改父级数据不是，Vue倡导的，因保持props的单向数据流
• 可以更灵活的使用组件

editComponent的具体使用

示例参考filterComponent, 相对于filterComponent使用就简单许多了，同理，会接受如下props，也可以通过editAttrs增加属性，editListeners可以接受你组件的响应事件

• value_ ： 当前单元格内的值（注意_）
• column：当前列对象
• row：当前行数据对象
• columnObj：columns中自身对象

当你改变原数据时也应该通知父级,不然原数据无法更改。（不应该直接将value_作为你组件绑定的值，而应该caopy一份，例如在data里面重新什么一个属性将value_的值赋给他）

事件：this.$emit('change',value)

如果你只是基于elementUI可编辑类组件经行二次修改的话通过$listeners属性你或许都可以不写这个事件，因 为基本都会有这个change事件响应。

不过change事件就不能在editListeners获取到了,不过你可以在cell-value-change的table事件中获取。

部分效果