哈喽,大家好又是我。昨天有个人在群里问:“基于 elementUI 如何实现拖动修改列宽度,并同步在多个表格中”。
这个功能其实听常见的,在不同的使用者眼中关注点就应该是不一样的。比如:
我们的目的是:针对于不同的人群,显示不同的字段,不同的排序规则(index、fixed)。那好,我们先来分析一下实现这样的功能都需要做什么。
宽度控制
el-table-column
组件添加 width
属性即可。:width
是否提供了拖拽调整宽度的方案?添加 border
,并且开启 resizable
(默认开启)。
header-dragend(newWidth, oldWidth, column, event)
当拖动表头改变了列的宽度的时候会触发该事件字段顺序
<el-table-column>
的顺序来控制。经过调研 elementUI 发现可以近乎完成这项工作,那么我们就不考虑其他方案了。只把获取当前宽度配置这一个问题解决就好了。
思考??一下,怎么改宽度?这不就 style="width: 10px"
行内样式嘛,这也太简单了。
打开控制台一看,草率??了,干干净净什么都没有。这就离谱了,??魔法吗?哈哈,当然不是,我们可以看到有个 colgroup
、col
标签,专门用来控制列宽。
那就简单了,我们直接获取即可。
重点是加 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>
@header-dragend
通过 @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]
)
}
})
},
一、作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联...
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行...
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列...
在讲CSS优先级之前,我们得要了解什么是CSS,CSS是用来做什么的。 首先,我们对C...
作者 / Krish Vitaldevara,Google Play 信任与安全产品管理总监 多年来,向数十...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件,其次最...
背景 京东购物小程序作为京东小程序业务流量的主要入口,承载着许多的活动和页面...
打开软件,我们按快捷键ctrl+n,建立一个新的文件。 点击常用,选择布局。 点击...
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及,已经被广泛的应用到了各个...
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和...