哈喽,大家好又是我。昨天有集体在群里问:“基于 elementUI 如何实现拖动 批改列宽度 ,并 同步在多个表格 中”。
这个性能其实听常见的,在 不同的使用者 眼中关注点就应该是不一样的。比方:
- 我的项目的主管,更关怀进度
- 前端开发,关怀设计稿、接口什么时候提供
- 后端开发,关怀前端什么时候写完,什么时候联调
- 测试人员,关怀什么时候提测,以及对应人员是谁
咱们的目标是:针对于不同的人群,显示不同的字段,不同的排序规定(index、fixed)。那好,咱们先来剖析一下实现这样的性能都须要做什么。
后期调研
elementUI 反对那些性能、回调?
-
宽度管制
- 宽度是否能够通过参数管制?提供,给
el-table-column
组件增加width
属性即可。 - 参数是首次无效,还是动静更新?动静更新所以能够应用
:width
-
是否提供了拖拽调整宽度的计划?增加
border
,并且开启resizable
(默认开启)。- 是否提供了回调函数?
header-dragend(newWidth, oldWidth, column, event)
当拖动表头扭转了列的宽度的时候会触发该事件 - 是否提供了 API 用于获取以后宽度配置?没有提供
- 是否提供了回调函数?
- 宽度是否能够通过参数管制?提供,给
-
字段程序
- 程序是否能够通过参数管制?没提供 ,看了一遍并且搜寻 排序、程序、index 等关键词并无播种。次要排序能力都是对内容区域。
- 如果无奈通过参数配置,那么通过什么中央能够影响到排序规定?咱们能够通过批改
<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]
)
}
})
},