2021-08-04 antdesign a-table 拉伸 和列显隐

总述：拉伸是继承了antdesign中的插件vue-draggable-resizable，列显隐是封装了一个组件。

1、首先安装插件vue-draggable-resizable

npm install vue-draggable-resizable --save

2、添加draggable-resizable.js，引入vue-draggable-resizable。
draggable-resizable.js文件内容如下：

import Vue from 'vue';
import VueDraggableResizable from 'vue-draggable-resizable';
Vue.component('VueDraggableResizable', VueDraggableResizable);

export default function draggableFun(tableColumns) {
    return {
        header: {
            cell: (h, props, children) => {
                const { key, ...restProps } = props;
                let col;
                if (key === 'selection-column') {
                    col = {};
                } else {
                    col = tableColumns.find(col => {
                        const k = col.dataIndex || col.key;
                        return k === key;
                    });
                }
                if (!col || !col.width) {
                    return h('th', { ...restProps }, [...children]);
                }
                const dragProps = {
                    key: col.dataIndex || col.key,
                    class: 'table-draggable-handle',
                    attrs: {
                        w: 10,
                        x: col.width,
                        z: 1,
                        axis: 'x',
                        draggable: true,
                        resizable: false,
                    },
                    on: {
                        dragging: (x, y) => {
                            col.width = Math.max(x, 1);
                        },
                    },
                };
                const drag = h('vue-draggable-resizable', { ...dragProps });
                return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag]);
            },
        },
    };
}

3、添加控制列显隐（弹框）组件 tableConfiguration.vue

<template>
    <a-popconfirm
        class="table-pop-confirm"
        ref="tableConfigRef"
        width="340px"
        :visible="visible"
        @confirm="handleSubmit"
        @cancel="handleCancel"
    >
        <p class="table-set-icon" @click="add"><i class="iconfont icon-set"></i>列表显示内容</p>
        <template #content>
            <a-checkbox-group @change="onChange" v-model="columnList" class="table-checkbox">
                <div v-for="(item, index) in dataCloums" :key="index" class="table-checkbox-item">
                    <p v-if="item.dataIndex !== 'action' && item.dataIndex !== undefined">
                        <a-checkbox :value="item.dataIndex">
                            {{ item.title }}
                        </a-checkbox>
                    </p>
                </div>
            </a-checkbox-group>
        </template>
    </a-popconfirm>
</template>

<script>
export default {
    components: {},
    props: {
        keyClounms: {
            type: Array,
        },
        allColumns: {
            type: Array,
        },
    },
    data() {
        return {
            visible: false,
            title: '',
            dataCloums: [], // 需要遍历的数据
            columnList: this.keyClounms, // 已经选中的数据
            list: [], // 回调返回给父组件的数据
            listClounms: [],
            trueList: this.keyClounms,
        };
    },
    watch: {
        visible() {},
    },
    created() {},
    methods: {
        add() {
            this.visible = true;
            this.list = [];
            for (let i = 0; i < this.allColumns.length; i++) {
                if (this.allColumns[i].title == '#') {
                    this.list.push(this.allColumns[i]);
                }
            }
            this.dataCloums = this.allColumns;
            this.columnList = this.trueList;
        },
        unique(arr) {
            const res = new Map();
            return arr.filter(arr => !res.has(arr.title) && res.set(arr.title, 1));
        },
        onChange(checkedValues) {
            this.columnList = checkedValues;
        },
        handleSubmit() {
            this.visible = false;
            this.trueList = this.columnList;
            for (let i = 0; i < this.dataCloums.length; i++) {
                this.columnList.forEach(item => {
                    if (this.dataCloums[i].dataIndex == item) {
                        this.list.push(this.dataCloums[i]);
                    }
                });
            }
            for (let i = 0; i < this.dataCloums.length; i++) {
                if (this.dataCloums[i].dataIndex == 'action') {
                    this.list.push(this.dataCloums[i]);
                }
            }
            this.$emit('ok', this.unique(this.list));
        },
        handleCancel() {
            this.visible = false;
        },
    },
};
</script>
<style lang="less">
.table-pop-confirm {
    position: absolute;
    right: 0;
}
.table-checkbox {
    margin-top: 15px;
    margin-left: 10px;
    display: flex;
    flex-wrap: wrap;
    .table-checkbox-item {
        width: 50%;
        height: 24px;
        p {
            overflow: hidden;
            height: 100%;
        }
        .ant-checkbox-wrapper {
            display: flex;
            align-items: center;
            height: 100%;
            .ant-checkbox {
                vertical-align: auto !important;
            }
        }
        .ant-checkbox-wrapper span:nth-of-type(2) {
            width: 100px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
        }
    }
}
</style>

4、table中如何引用拖拽和列显隐。

//引入相关js  
import draggableFun from '@/utils/draggable-resizable';
import tableConfiguration from '@/layouts/tableConfiguration';

//table中调用
//列显隐组件
<table-configuration
    ref="tableConfiguration"
     :keyClounms="keyClounms"
     :allColumns="allColumns"
     @ok="handleColumns"
 />
 // 表格  
 // bordered必须，拖拽需要有边框
 // :components="components"  绑定的列属性
 <a-table
 	 bordered
     :columns="tableColumns"
     :data-source="tableData"
     :loading="tableLoading"
     class="g-mt30"
     :pagination="false"
     row-key="deviceId"
     :components="components"
 >
  
 </a-table>

// js部分
// 组件
components: {
  selectProject,
     tableConfiguration,
},
// 属性
computed: {
  components() {
        return draggableFun(this.tableColumns);
    },
},
// data  
// tableColumns中的width 必须是数字
data(){
	return {
		allColumns: [],
        keyClounms: [],
        tableColumns: [
                {
                    title: '名称',
                    dataIndex: 'name',
                    key: 'name',
                    ellipsis: true,
                    width: 150,
                },
                {
                    title: '类型',
                    dataIndex: 'type',
                    key: 'type',
                    ellipsis: true,
                    width: 150,
                },
                {
                    title: '状态',
                    dataIndex: 'status',
                    key: 'status',
                    ellipsis: true,
                    width: 150,
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    key: 'action',
                    ellipsis: true,
                    width: 150,
                },
         ],
	}
}


created() {
    for (const item of this.tableColumns) {
        this.allColumns.push(item);
        this.keyClounms.push(item.dataIndex);
    }
},
methods: {
    handleColumns(val) {
        this.tableColumns = val;
    },
 },

全局还需要设置样式 最好设置在app.vue中。

// 设置可拖拽的样式
.resize-table-th {
    position: relative;
}
.table-draggable-handle {
    width: 10px !important;
    height: 100% !important;
    left: auto !important;
    bottom: 0 !important;
    right: -5px !important;
    cursor: col-resize;
    touch-action: none;
    border: none;
}