iview table 自定义列_案例 | iview中Table:拖拽适配列、自定义固定列、合并行
文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
❥❥❥❥点个赞,让我知道你来过~❥❥❥❥
0 / 更新Table
"iview": "2.13.0",对比最新版本的iview:4.1.3中的Table功能,获取最新功能:拖拽、合并行等。
【PS:由于一些原因不能统一升级整个iview,我动了源码这很不好,望大佬们不吝赐教更好的方案~】
1 / Table的拖拽适配列
在table.vue文件中handleResize方法里实现了:
不设置列的属性width,而是设置属性maxWidth和minWidth用来适配在拖拽时表格产生的留白的适配,会把留白的宽度平均分配给适配列。
其中,最后呈现的宽度不会比最小宽还小,不会比最大宽度还大。
(1)拖拽设置边界值
为了使拖拽后的表格不会无限制的宽,也不会特别窄,设置边界值:
table.vue
minColumnWidth:{
type:Number,
default:50
},
maxColumnWidth:{
type:Number,
default:560
}
table-head.vue
const columnWidth = _width < this.minColumnWidth ? this.minColumnWidth : (_width > this.maxColumnWidth ? this.maxColumnWidth : _width);
(2)可拖拽范围加宽
把鼠标可拖拽的范围放宽:
if (rect.width > 12 && rect.right - event.pageX < 8)
// 把判断条件的8改为16
table.less
.@{table-prefix-cls} {
&-header{
&-resizable{
width: 20px; // 把原来的10px更新为20px
}
}
}
2 / Table的自定义固定列
公号ID:zhaoxiajiingjing
△图12.1:用户可以自己配置固定列
公号:朝霞的光影笔记
△图12.2:固定后的结果
【PS:实现此功能,请原谅我修改了源码】
在列上添加属性freezable:true表示允许用户自己设置固定列,其代码里面操作的依旧是列的属性fixed实现效果。
(1)新增泡泡文件freeze-poptip.vue
v-model="showFlag"
popper-class="ivu-table-popper "
trigger="hover"
placement="top" :transfer="true">
import Poptip from '../poptip/poptip.vue';
export default {
components: { Poptip },
props:{
prefixCls: String,
show:{
type:Boolean
},
hide:{
type:Boolean
}
},
watch:{
hide(newFlag, oldFlag){
if(newFlag === false) {
this.showFlag = false;
}
}
},
data() {
return {
showFlag:this.show
};
}
}
(2)在表头添加冻结提示泡泡table-head.vue
import FreezePoptip from './freeze-poptip.vue';
:show="getColumn(rowIndex, index)._freezeVisible"
:prefixCls="prefixCls"
:hide="getColumn(rowIndex, index)._freezeVisiblePoptip"
>
@click="handleFreezable(getColumn(rowIndex, index)._index, 'left')">
:disabled="column.fixed === 'left'" >左侧冻结
@click="handleFreezable(getColumn(rowIndex, index)._index, 'right')">
:disabled="column.fixed === 'right'">右侧冻结
@click="handleFreezable(getColumn(rowIndex, index)._index, '')">
:disabled="(typeof column.fixed === 'string' && column.fixed.length === 0) || typeof column.fixed === 'undefined'" >还原
添加点击方法
// 2020年3月10日10:08:28 冻结
handleFreezable(index, type){
const column = this.columns.find(item => item._index === index);
const _index = column._index;
this.$parent.handleFreezable(_index, type);
},
(3)修改table.vue
handleFreezable(_index, type){
const index = this.GetOriginalIndex(_index);
const key = this.cloneColumns[index].key;
this.cloneColumns[index]._freezeVisiblePoptip = false;
this.$emit('on-freeze-change', {
column:JSON.parse(JSON.stringify(this.allColumns[this.cloneColumns[index]._index])),
key,
fixed:type
});
},
makeColumns (cols) {
//....CODE
let hasFreezable = columns.some(col => col.freezable===true);
let hasResizable = columns.some(col => col.resizable===true);
columns.forEach((column, index) => {
//...CODE
(hasFreezable || hasResizable ) && (column.width = parseInt(column.width));
//...CODE
});
//....CODE
}
(4)应用
应用的代码在文末
3 / Table的合并行
(1)阅读iview的源码
根据iview给出的例子,只需要把合并的规则传入到组件内即可
公号ID:zhaoxiajingjing
△图12.3:iview的Table合并行的例子
table-body.vue在这里可以学习一下,如何判断一个方法的返回值是数组还是对象
getSpan (row, column, rowIndex, columnIndex) {
// 拿到传过来的方法 spanMethod
const fn = this.$parent.spanMethod;
// 是function类型的才可以
if (typeof fn === 'function') {
// 调用该方法,并把返回值结果赋值给变量result
const result = fn({
row,
column,
rowIndex,
columnIndex
});
// 设置初始值
let rowspan = 1;
let colspan = 1;
if (Array.isArray(result)) {
// 返回结果值是数组
rowspan = result[0];
colspan = result[1];
} else if (typeof result === 'object') {
// 返回结果值是对象
rowspan = result.rowspan;
colspan = result.colspan;
}
return {
rowspan,
colspan
};
} else { // 否则:{}
return {};
}
},
(1)判断是否为函数typeof fn === 'function'
(2)判断是否为数组Array.isArray(result)
(3)判断是否为对象typeof result === 'object'【仅限于此处约定的返回值是一个对象或者一个数组】
let fn = function (){
return [];
};
if (typeof fn === 'function'){ // (1)
const result = fn();
if (Array.isArray(result)) { // (2)
// ...something
} else if (typeof result === 'object') { //(3)
// ...something
}
}
可以看到它的表格数据data5是一条一条写的。
对于我们想要的数据格式如下,那就需要处理一下了,具体方法见文末
[
{
"teacher":"教师1",
"course":"语文",
"studentList":[
{
"student":"学生1"
},
{
"student":"学生2"
}
]
}
]
(2)鼠标移入的样式
公号:朝霞的光影笔记
△图12.4:鼠标移入的样式
思路:在设置合并行的时候,给一个统一的标识符,在鼠标移入后,把带有该标识符的都加上移入的样式
【PS:大佬们打脸轻一些,请不吝赐教更好的方案】
公号:朝霞的光影笔记
△图12.5:给tr加上行标识
rowClasses (_index) {
// ...CODE
let {rowspanHoverFlag} = objData;
if(rowspanHoverFlag && objData){
for (let rowIndex in this.objData) {
let row = this.objData[rowIndex];
if(row.rowspanHoverFlag === rowspanHoverFlag && this.$parent.$el) {
let el = this.$parent.$el.querySelector(`.myhoverindex-${rowIndex}`);
let _class = objData._isHover ?
( `myhoverindex-${rowIndex} ${this.prefixCls}-row ${this.rowClsName(rowIndex)} ${this.prefixCls}-row-highlight ${this.prefixCls}-row-hover`)
: (`myhoverindex-${rowIndex} ${this.prefixCls}-row ${this.rowClsName(rowIndex)}`);
(el!==null && el.setAttribute) && el.setAttribute('class',_class);
}
}
}
// ...CODE
}
4 / 应用
PS:自定义冻结是修改的源码,如需要该功能,请自行贴上面介绍的代码
PS:我动了源码这很不好,望大佬不吝赐教更好的方案
公号ID:zhaoxiajingjing
border
ref="selection"
:columns="columns3"
:data="data3"
:span-method="handleSpan"
@on-freeze-change="onFreezeChange"
>
export default {
data() {
return {
columns3:[
{
title:'教师',
key:'teacher',
resizable:true,
freezable:true,
width:100
},
{
title:'教师编号',
key:'teacherCode',
resizable:true,
freezable:true,
width:120
},
{
title:'课程',
key:'course',
resizable:true,
freezable:true,
width:120
},
{
title:'学生',
key:'student',
rowRelation:'many',
resizable:true,
freezable:true,
width:100
},
{
title:'学号',
key:'studentCode',
rowRelation:'many',
resizable:true,
width:120
},
{
title:'成绩',
key:'score',
rowRelation:'many',
resizable:true,
freezable:true,
width:100
},
{
title:'批语',
key:'explain',
rowRelation:'many',
freezable:true,
minWidth:100
}
],
data3:[],
tableDataArr3:[
{
"id":1,
"teacher":"Name 1",
"teacherCode":"Teacher-1",
"course":"语文",
"studentList":[
{
"studentCode":"2020001",
"student":"学生1",
"score":"A",
"explain":""
},
{
"studentCode":"2020002",
"student":"学生2",
"score":"B",
"explain":""
},
{
"studentCode":"2020003",
"student":"学生3",
"score":"B",
"explain":""
},
{
"studentCode":"2020004",
"student":"学生4",
"score":"A",
"explain":""
}
]
},
{
"id":2,
"teacher":"Name 2",
"teacherCode":"Teacher-2",
"course":"物理",
"studentList":[
{
"studentCode":"2020001",
"student":"学生1",
"score":"B",
"explain":""
},
{
"studentCode":"2020002",
"student":"学生2",
"score":"B",
"explain":""
},
{
"studentCode":"2020003",
"student":"学生3",
"score":"B",
"explain":""
}
]
},
{
"id":3,
"teacher":"Name 3",
"teacherCode":"Teacher-3",
"course":"历史",
"studentList":[
{
"studentCode":"2020003",
"student":"学生3",
"score":"A",
"explain":""
},
{
"studentCode":"2020004",
"student":"学生4",
"score":"A",
"explain":""
}
]
},
{
"id":4,
"teacher":"Name 4",
"teacherCode":"Teacher-4",
"course":"美术",
"studentList":[
{
"studentCode":"2020004",
"student":"学生4",
"score":"A",
"explain":""
}
]
}
],
};
},
mounted() {
setTimeout(() => {
this.data3 = this.data2TdRowspan({tableData:this.tableDataArr3, rowspanList:'studentList'});
}, 300);
},
methods: {
onFreezeChange({column = {}, key = '', fixed = ''} = {}) {
this.columns3 = this.columns3.map((col, index) =>{
if (col.key === key) {
col['fixed'] = fixed;
}
return col;
});
},
/**
* 2020年4月2日09:53:02 by jing_zhaoxia@sina.com
* @param arr 需要处理的数据数组
* @param rowspanList 合并行的数组
* @param rowspanHoverFlag 作为鼠标滑入的行的标记
* @returns {*} [Array] 将处理好的数据返回去
*/
data2TdRowspan(params){
let json = {};
if (Array.isArray(params)) {
json.tableData = params;
} else if(Object.prototype.toString.call(params) === '[object Object]'){
json = params;
}
let {tableData:arr = [], rowspanList = 'studentList', rowspanHoverFlag='id'} = json;
return arr.map((row, index) =>{
let rowspanArr = row[rowspanList];
let rowspan = rowspanArr.length;
return rowspanArr.map((sRow, sIndex) => {
sIndex === 0 ? row.rowspan = rowspan : (row.rowspan = 0, row._rowspan = rowspan);
sRow.rowspanHoverFlag = row[rowspanHoverFlag];
delete row[rowspanList];
return { ...sRow, ...row};
});
}).flat(Infinity);
},
handleSpan({row:{rowspan}, column:{rowRelation='', isExtended=false}}) {
return rowRelation !== 'many' ? {rowspan} : {};
}
}
};
iview table 自定义列_案例 | iview中Table:拖拽适配列、自定义固定列、合并行相关推荐
- VUE3 中实现拖拽和缩放自定义看板 vue-grid-layout
Vue Grid Layout官方文档 Vue Grid Layout中文文档 1. npm下载拖拽缩放库 npm install vue-grid-layout@3.0.0-beta1 --save ...
- eclipse插件开发:自定义导航器中的拖拽定义
有时候需要对导航器中的拖拽对象进行赋值,使用的场景是,拖拽导航器中的某个文件或者类或方法等,到某个编辑器中,, 因为默认的导航器所配备的拖拽动作,或则不能满足我们的需要,所有,有必要自定义,,拖拽器, ...
- vue中实现拖拽排序
原生拖拽 API 实现拖拽 设置元素 dragable 将元素的 dragable 属性设置 为 true (文本 图片 链接 的draggable 属性默认为 true)则元素可拖放 <div ...
- 中如何使用echart_jQueryEasyUI中的拖拽事件如何使用
jQueryEasyUI中的拖拽事件通过给它设置代理元素使其拖拽.可设置拖动元素相对于x.y轴拖动,可设置拖拽何时停止等效果 jQuery中的easyui是一个非常好用的插件,它虽然使用简单方便,但是 ...
- selenium中录制拖拽动作
今天工作中遇到了selenium中录制拖拽动作需求:在同一个页面上,将一个table中的元素拖拽到另外一个table中. 通过查看帮助文档是使用dragAndDrop或类似的命令.根据使用方法drag ...
- Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了 拖拽添加组件 的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下 本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
- vue-draggable的多列拖动与拷贝拖拽(不删除源数据列)
vue-draggable的多列拖动与拷贝拖拽(不删除源数据列) Demo 所用属性 所遇困难 源码 Demo 官方文档 录屏软件:screenToGif (将视频转为Gif,我认为简单又好操作) 我 ...
- .net中实现拖拽控件
在.net中实现拖拽控件主要用到以下函数: MouseDown(object sender, MouseEventArgs e) MouseUp(object sender, MouseEventAr ...
- java swing 控件拖动_java swing中实现拖拽功能示例
java实现拖拽示例 Swing中实现拖拽功能,代码很简单,都有注释,自己看,运行效果如下图: package com; import java.awt.*;import java.awt.datat ...
最新文章
- 在 Node.js 中用子进程操作标准输入/输出
- 离散信号处理的基本概念理解(第一章 离散序列和离散系统(全))
- corpora for america English
- 为了帮视障人士“看见”,阿里工程师做了哪些努力?
- div旋转45度_为什么不要买旋转式电动牙刷:欧乐B电动牙刷D12开箱与体验
- 使用Git将本地文件夹同步至github
- 【python】MAC链接oracle
- elasticsearch,使用normalizer优化keyword字段的查询
- Ubuntu下软件包的清理与删除
- 新技术表明通过观察灯泡振动可进行窃听,以后聊天得拉窗帘
- 系统上公有云安全需要考虑什么?
- 神经网络实现---SSD
- 南澳.西冲-东冲穿越之旅
- 二十一世纪大学英语读写教程学习笔记(原文)——6 - Nerds and Geeks(书呆子和极客)
- GIT 无法拉取,因为存在未提交的更改。 在重新拉取前提交或撤消更改
- JAVA读书网络社区设计计算机毕业设计Mybatis+系统+数据库+调试部署
- mysql 的alter table操作
- 网络安全知识点梳理(二)
- Android 7.0解析包时出现问题 的解决方案(版本更新)
- 【工作小tip】项目活动签到码扫码获取不到数据的bug的解决
热门文章
- html引入avalon,avalon中文文档
- 1在mysql进行定义操作系统_Mysql基础知识一
- Linux 之三 静态库及动态库的编写和使用
- STM32 之五 Core Coupled Memory(CCM)内存
- 计算机网络rsa算法,计算机网络安全实验新报告--非对称密码算法RSA.doc
- redis php扩展 linux,linux下为php安装redis扩展phpredis
- Keil uVision2 简介
- 启明云端分享|ESP8089 pin to pin 替代RTL8189,供应稳定、性价比高!
- Arduino--AS608指纹传感器
- 【iMX6ULL】触觉 imx6ull开发板交叉编译环境搭建