案例 | 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：用户可以自己配置固定列

△图12.2：固定后的结果

【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="getColumn(rowIndex, index)._freezeVisible"
              :prefixCls="prefixCls"
              :hide="getColumn(rowIndex, index)._freezeVisiblePoptip"
>
    <template slot="freezeContent">
        <ul :class="[prefixCls + '-freeze-list-single']">
            <li :class="[prefixCls + '-filter-select-item']"
                @click="handleFreezable(getColumn(rowIndex, index)._index, 'left')">
                <Button type="text" :class="[prefixCls + '-freeze-btn']"
                          :disabled="column.fixed === 'left'" >左侧冻结</Button>
            </li>
            <li :class="[prefixCls + '-filter-select-item']"
                @click="handleFreezable(getColumn(rowIndex, index)._index, 'right')">
                <Button type="text" :clas