Element ui表格组件修改,实现可编辑单元格,自定义下拉筛选,数据化结构,快捷选择。

·  阅读 11985

前言

在使用ElementUI过程中,表格的使用占了很大一部分,但是使用起来总感觉不方便,而且部分想要的功能也没有。这促使我在ElementUI 表格组件上再进行一次封装。在这基础上添加所需功能,并且要使用更方便,但是不能破坏原有功能。

此项目已经上传GitHub,欢迎交流,希望能给个star鼓励一下,谢谢^-^。 在线Demo

效果

编辑-选择

筛选

主要内容

  • 数据化结构(减少html代码)
  • 可编辑单元格(同时满足不同编辑形式)
  • 自定义显示单元格内容 (el-table-column作用域插槽的数据结构版)
  • 自定义下拉筛选(获取远程下拉筛选条件,自定义下拉筛选形式)
  • 选择数据简单化(单击选择/取消,快捷多选,连续多选)
  • 保证原有功能

因为代码太多所以没有全部放,只抽出部分讲解,感兴趣的小伙伴可以到GitHub下载一份源码。

数据化结构

将原有的html结构变为数据结构,只用写一个数组传入就可生成想要的结构

  • 原来
 <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="150"></el-table-column>
    <!-- 多级表头 -->
    <el-table-column label="配送信息">
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column label="地址">
        <el-table-column prop="province" label="省份" width="120"></el-table-column>
        <el-table-column prop="city" label="市区" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" width="300"></el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
 </el-table>
复制代码
  • 现在
//html e-table为封装好的组件名
<e-table :data="tableDate" :columns="columns"></e-table>

//数据
columns: [
      {
        prop: "date",
        label: "日期",
        width: 150
      },
      {
        label: "配送信息",
        childrens: [
          {
            label: "地址",
            childrens: [
              {
                label: "省份",
                prop: "province",
                with:120
              },
              {
                label: "市区",
                prop: "city"
              }
              ...
            ]
          }
        ]
      }
    ]
复制代码

这样数据化之后可以更方便操作,结构也更清晰。每一个el-table-column对应columns数组中的一个元素,可以嵌套实现多级表头。元素里面可以包含所有el-table-column上的属性。

实现方式

通过render函数循环嵌套生成,也可以写.vue的单文件用html结构生成,但是没有render函数生成可操控性高,render函数可以更加精确的操控元素,也更加贴近编译器。还没用过的同学赶快学习一下把 render

// render 函数部分代码
render(h){
    let _this = this,
    columnRender = function(col,h){
    if(!hasOwn(col, 'childrens')){
        .... // 主要内容 单独讲
    }else{
        if (Array.isArray(col.childrens) && col.childrens.length > 0) {
                    return h('el-table-column', {
                        attrs: {
                            label: col.label || col.prop
                        }
                    }, [...col.childrens.map(function (column) { //递归
                        return columnRender(column, h)
                    })])
                }
         return null;
         }
    }

   return h('el-table', {
            ref: 'elTable',
            
            props: {
                ...this.$attrs, //传递所有绑定的属性
                
                // 添加功能需要用到属性,覆盖,并将这些属性作为props接受,然后再在内部添加,保证功能不缺失
                rowStyle: this.rowStyle_, 
                cellClassName: this.cellClassName_,
                rowClassName: this.rowClassName_,
            },
           
            on: {
                ...this.$listeners, // 传递监听的所有事件
                ...this.eListeners // 添加功能所需,同理 在内部再添加该事件,保证不缺失功能
            },
            
            scopedSlots: { //保留其具名插槽
                empty: function () { 
                    return _this.$slots.empty
                },
                append: function () {
                    return _this.$slots.append
                }
            },
        }, [ this.columns.map(function (col) { // 渲染转递过来的columns数组
                return columnRender(col, h) //循环递归column 单独抽离为一个函数(定义在上面)
            }),
            this.$slots.default // 保留默认的html写法
        ]) 
}

复制代码

可编辑单元格

网上很多的ElementUI表格可编辑表格教程都是一整行的切换编辑状态,这不是我想要的。应该是每个单元格都可以控制编辑状态

//添加编辑功能 所添加的属性
columns:[
    {
     prop:'name',
     label:'姓名',
     
     edit:true, //该列开启可编辑模式
     editType:'selection', //选择编辑形式,默认default,即input框 可以不写该属性
     editControl:function(value,row,column){return true} ,//更精确控制该列每个单元格是否可编辑
     editComponent:customCompontent,//可以传入自定义编辑组件
     editAttrs:{size:'mini',...},// 可以传入属性
     editListeners: { focus:function(){},...} //可接受事件 
     }
]
复制代码
实现方式
// 主要代码
 if (!hasOwn(col, 'childrens')) {
     ...
      return h('el-table-column',{
          props: {
                   ...col //赋予属性
             },
        scopedSlots:{
            default:function (props) { //改写默认内容
                            let {
                                row,
                                column
                            } = props;

                            let funControl = isFunction(col.editControl) ? col.editControl.call(null, row[col.prop], row, column) : true, //控制每个单元格的可编辑性
                                isCan = (_this.tableConfig.cellEdit !== false && col.edit && funControl) ? true : false;

                            isCan ? _this.setEditMap({ //生成可编辑表格的具体位置集合 点击单元格时匹配,显示编辑框
                                x: row.rowIndex,
                                y: column.property
                            }) : null;

                            if (isCan && _this.editX === row.rowIndex && _this.editY === column.property){//点击单元格满足条件显示编辑框
                                let options = { // .... props 和 listeners 的绑定 
                                    attrs: {
                                        ...col.editAttrs
                                    },
                                    props: { //给编辑组件传递数据
                                        value_: row[col.prop],
                                        column: column,
                                        columnObj: col,
                                        row: row
                                    },
                                    on: {
                                        ...col.editListeners,
                                        setValue: (v) => { //改变单元格原数据,自定义编辑组件也应提供这个事件来改变原数据
                                            row[col.prop] = v
                                        },
                                        change: (v) => { //覆盖change事件,转移到table主体事件
                                            _this.$emit('cell-value-change', v, row, column, col)
                                        }
                                    },
                                if (col.editComponent && typeof col.editComponent === 'object') { //使用自定义编辑组件
                                    return h(col.editComponent, options)
                                } else { //使用内部自带编辑组件
                                    return h(editComponents[col.editType || 'default'], options)
                                }

                            } else {
                                //... 默认内容
                            }
                   }
        }
      })  
 }
复制代码

自定义单元格显示

在使用html结构时可以使用作用域插槽进行自行自定义显示,而现在数据化结构后只能使用使用数据化方式,最为合理且唯一的应该就是调用render函数渲染自定义内容了。(如果写成字符串解析成html,有很多问题,无法使用组件,无法绑定事件...)

columns:[
    {
        prop:'render',
        label:'自定义显示',
        
        renderCell:function(h,{value,row,column}){ //自定义渲染内容
                    return h('el-button',
                            {
                              attrs:{size:'mini'},
                              on:{
                                  click:e=>{...},
                                  ...
                                 }
                               ...
                         },'自定义')                
                     } //自定义渲染内容
        formatter:function(value){return `<b>${value}</b>`}//格式化内容,可写入html字符串
    }
]

复制代码
实现方式
//主要代码 接可编辑代码
 if (isCan && _this.editX === row.rowIndex && _this.editY === column.property){
     ....
 }else{
     if (col.renderCell && typeof col.renderCell === 'function') { //显示自定义内容
         return col.renderCell.call(null, h, { // 实现render功能
                                        value: row[col.prop],
                                        row: row,
                                        column: column,
                                    })
                                } else { //显示默认内容
                                    return h('span', {
                                        domProps: { //将内容作为html解析
                                            innerHTML: (col.formatter && typeof col.formatter === 'function') ?
                                                col.formatter(row[col.prop]) : row[col.prop]
                                        }
                                    })
                                }                           
     }
复制代码

自定义下拉筛选

ElementUI 表格自带自由两种下拉筛选形式的选择而且需要先给定值,不能满足下拉筛选数据异步从服务器拿数据的需求。所以为了保留原来自带的下拉功能,就要将这两种方式区别开来。添加defaultHeader属性,为true则使用默认列表头,否则使用自定义表头。

//<e-table :columns="columns" :getFilters="getFilters"></e-table>

getFilters:function(){ //总的获取下拉数据异步函数 需返回Promise.resolve(data)
    return new Promse((resolve,reject)=>{
        req('/api/getFilters').then(res=>{
            resolve(res.data)
        })
    })
},
columns:[
    {
        prop:'filter',
        label:'自定义下拉筛选',
        
        defaultHeader:false, // 默认为false 为true时自定义筛选无用,显示为默认列表头 添加filters数组属性则使用默认表格下拉筛选
        
        filter:true, //开启过滤
        filterType:'selection', //内置下拉筛选类型 默认selection 多选 
        filterComponent:customCp //自定义下拉筛选组件
        getFilters:function(){ //可控制获取每个列的下拉筛选数据
            return new Promise(....)
        },
        filterAttrs:{ //传递属性
            size:'mini',
            ...
        },
        filterListeners:{ //绑定事件
            change:function(){}
            ...
        },
    }
]
复制代码
实现方式

因为下拉内容为独立出来的部分,所以使用el-popover组件组为载体,显示下拉筛选内容,将popover单独封装为组件当点击下拉筛选按钮时再实例化显示它。

// 点击按钮时主要代码 
async headFilterBtnClick(columnObj, column, event) {
            let colKey = column.columnKey || column.property || column.id;

            if (this.filterLoads.some(fd => fd === colKey)) return; //已在loading状态点击无效
            const target = event.target;
            let cell = target.tagName === 'I' ? target : target.parentNode,
                filterPanel = this.filterPanels[colKey],
                filtersData = [];
            cell = cell.querySelector('.e-filter-tag') || cell;

            if (filterPanel && this.headFCNs.some(f => f === colKey)) { // 已经存在过滤面板且已打开面板
                filterPanel.doClose()
                return
            }

            this.filterLoads.push(colKey) //显示loading

            try { //await异步获取过滤数据时 捕获异常
                if (columnObj.getFilters && typeof columnObj.getFilters === 'function') {
                    filtersData = (await columnObj.getFilters(columnObj, column)) || [] //每一列可单独异步获取下拉数据
                } else if (this.getFilters) {
                    filtersData = (await this.getFilters(columnObj, column)) || [] //下拉数据获取
                }
            } catch (error) {
                this.filterLoads.splice(this.filterLoads.findIndex(fd => fd === colKey), 1)
                throw new Error(error)
                return
            }

            if (filterPanel) { //存在但当前未打开
                this.filters = filtersData;
                filterPanel.filtedList = this.filtedList;
                filterPanel.filters = filtersData;
                this.filterLoads.splice(this.filterLoads.findIndex(fd => fd === colKey), 1);
                filterPanel.doShow();
                return
            }

            if (!filterPanel) { //不存在过滤面板
                filterPanel = new Vue(FilterPanel) //实例化popover组件
                this.filterPanels[colKey] = filterPanel //将每个下拉的popover保存到table内部方便操作
                filterPanel.reference = cell  //popover显示依赖
                filterPanel.columnId = colKey //传递数据
                filterPanel.column = column
                filterPanel.columnObj = columnObj
                filterPanel.table = this._self
                filterPanel.filters = filtersData,
                    filterPanel.filtedList = this.filtedList,
                    filterPanel.$mount(document.createElement('div')); //挂载
                this.filterLoads.splice(this.filterLoads.findIndex(fd => fd === colKey), 1)
                filterPanel.doShow() //显示组件
            }

        },

复制代码
  • filterPanel组件组要代码
 render(h) {
        let _this = this
        return h('el-popover', {
            props: {
                reference: this.reference,
               
            },
            on: {
                hide: this.hide,
                show: this.show,
            },
            ref: "filterPane",
            scopedSlots: {
                default: function (props) {
                    let options = {
                        attrs: {
                            ..._this.columnObj.filterAttrs //传递属性
                        },
                        props: {
                            filters: _this.filters,
                            filtedList: _this.filtedList,
                            column: _this.column,
                            columnObj: _this.columnObj,
                            showPopper: _this.showPopper
                        },
                        on: {
                            ..._this.columnObj.filterListeners, //传递事件
                            filterChange: _this.filterChange //数据改变时触发
                        }
                    };
                    if (_this.columnObj.filterComponent && typeof _this.columnObj.filterComponent === 'object') { //自定义下拉筛选组件
                        return h(_this.columnObj.filterComponent, options)
                    }
                    //内置下拉筛选组件
                    return h(filterComponents[_this.columnObj.filterType || 'selection'], options)
                }
            }
        })
        
//主要事件,将数据传给table        
 filterChange(value, columnObj, column) {
            this.table.filterChange(value, columnObj, column)
            this.doClose() //关闭面板
},
复制代码

选择数据简单化

这个内容在之前已经单独讲过,Element UI 表格点击选中行/取消选中 快捷多选 以及快捷连续多选,高亮选中行;

结语

修改这些功能主要靠render函数的特性,虽然结构看起来不宜读(可采用jsx语法),但是能够更好的完成需求,也算将功补过吧,总的来说完成的还算比较满意。如果有什么建议,或则有什么更好的方式完成这些需求,欢迎交流。

分类:
前端
标签:
分类:
前端
标签: