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的自定义固定列


△图12.1：用户可以自己配置固定列

【PS：实现此功能，请原谅我修改了源码】

在列上添加属性freezable:true表示允许用户自己设置固定列，其代码里面操作的依旧是列的属性fixed实现效果。

(1)新增泡泡文件freeze-poptip.vue

<template>

<!-- 2020年3月10日10:01:50 可以冻结 -->

<Poptip

v-model="showFlag"

popper-class="ivu-table-popper "

trigger="hover"

placement="top" :transfer="true">

<span :class="[prefixCls + '-freeze']">

<Icon type="loudou" ></Icon>

</span>

<div slot="content" :class="[prefixCls + '-freeze-list']">

<slot name="freezeContent"></slot>

</div>

</Poptip>

</template>

<script>

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

};

}

}

</script>

(2)在表头添加冻结提示泡泡table-head.vue

import FreezePoptip from './freeze-poptip.vue';

<FreezePoptip v-if="column.freezable"

:show="getColum