elementUI table 组件实现自定义列、宽度、排序并联动同步

最近在项目中有这样一个需求,基于 elementUI的table 组件如何实现拖动修改列宽度,并同步在多个表格中,这个功能其实大家也挺常见的,所以既然遇到了,就总结一下,方便日后再遇到时遗忘掉相关知识,也为新朋友提供参考价值。

我们的目的是:针对于不同的人群,显示不同的字段,不同的排序规则(index、fixed)。那好,我们先来分析一下实现这样的功能都需要做什么。

前期调研

elementUI 支持那些功能、回调?

  1. 宽度控制
    1. 宽度是否可以通过参数控制? 提供,给 el-table-column 组件添加 width 属性即可。
    2. 参数是首次有效,还是动态更新?动态更新所以可以使用 :width
    3. 是否提供了拖拽调整宽度的方案?添加 border ,并且开启 resizable (默认开启)。
      1. 是否提供了回调函数?header-dragend(newWidth, oldWidth, column, event) 当拖动表头改变了列的宽度的时候会触发该事件
      2. 是否提供了API用于获取当前宽度配置?没有提供
  2. 字段顺序
    1. 顺序是否可以通过参数控制?没提供,看了一遍并且搜索 排序、顺序、index 等关键词并无收获。主要排序能力都是对内容区域。
    2. 如果无法通过参数配置,那么通过什么地方可以影响到排序规则?我们可以通过修改 <el-table-column> 的顺序来控制。

分析

经过调研 elementUI 发现可以近乎完成这项工作,那么我们就不考虑其他方案了。只把获取当前宽度配置这一个问题解决就好了。

思考一下,怎么改宽度?这不就 style="width: 10px" 行内样式嘛,这也太简单了。

elementUI table 组件实现自定义列、宽度、排序并联动同步

打开控制台一看,草率😅了,干干净净什么都没有。这就离谱了,魔法吗?哈哈,当然不是,我们可以看到有个 colgroupcol 标签,专门用来控制列宽。

elementUI table 组件实现自定义列、宽度、排序并联动同步

那就简单了,我们直接获取即可。

实现代码

宽度控制(自带)

重点是加 border

<el-table :data="tableData" border @header-dragend="headerdragend" style="width: 100%">
    <el-table-column v-for="column in tableTitleList" :fixed="column.fixed" :prop="column.prop"
        v-if="column.isShow"
        :label="column.label" :width="column.width">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
        </template>
    </el-table-column>
</el-table>

[email protected]

通过 @header-dragend 拿到通知,然后去获取节点上的真实数据

headerdragend(newWidth, oldWidth, column, e) {
    // 获取到触发节点,也就是你拖动的是哪一个
    var el = e.target;
    
    // 获取到当前 table 的 colgroup col 节点,用于后面获取宽度
    // getParentNodes 是一个模仿 $(el).parents() 的方法
    var colList = getParentNodes(el, 'table').querySelectorAll('colgroup col');
    
    // 获取当前拖动的是第几个,方便后续检测 DOM 是否已更新
    var currentColIndex = this.tableTitleList.findIndex(item=>item.label == column.label);
    if(currentColIndex == -1){
        return console.warn('找不到拖动列')
    }
    
    // 修改配置列表,把当前列设置为固定宽度
    this.tableTitleList[currentColIndex].widthEnable = true;

    // 起了一个定时任务去获取最终的宽度
    clearInterval(headerDragendInterval)
    headerDragendInterval = setInterval(()=>{
        // 判断一下目标列的宽度是否为最终宽度
        if(colList[currentColIndex].width == newWidth){
            this.changeColumnWidth(colList);
            clearInterval(headerDragendInterval)
        }else if(colList[currentColIndex].width == oldWidth){
            console.info('需要等待渲染')
        }else{
            console.warn('异常值');
            this.changeColumnWidth(colList);
            clearInterval(headerDragendInterval)
        }
    }, 10)
}

控制顺序

因为数组是有顺序的嘛,所以使用 v-for 来循环,然后改变数组中的顺序,就可以改变渲染出来的内容顺序。

<el-table :data="tableData" border @header-dragend="headerdragend" style="width: 100%">
    <el-table-column v-for="column in tableTitleList" :fixed="column.fixed" :prop="column.prop"
        v-if="column.isShow"
        :label="column.label" :width="column.width">
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
        </template>
    </el-table-column>
</el-table>

拖动排序

这块我直接使用 Sortable 来实现功能,正好也是群里一个人问的。在 onEnd 的时候把操作同步到数据源就OK了。

initSort(){
    var el =  document.querySelector('#sortWrap')
    var that = this;
    Sortable.create(el, {
        delay: 100,
        sort: !0,
        forceFallback: !0,
        scrollSensitivity: 100,
        animation: 150,
        ghostClass: "gift-ghost-item",
        chosenClass: "gift-chosen-item",
        onEnd: function(t) {
            that.tableTitleList.splice(
                t.newIndex, 
                0, 
                that.tableTitleList.splice(t.oldIndex, 1)[0]
            )
        }
    })
},

完结,拿走不谢。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » elementUI table 组件实现自定义列、宽度、排序并联动同步

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们