Ant desgin vue 表格滑动效果：

1.html代码块：

<!-- 表格 -->
        <div class="admin_table_list">
            <a-table :rowkey="id" bordered size="small" :components="components"
                :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                :data-source="orderList" :pagination="false" :scroll="{x:750 | true, y: 440 }">
                <a slot="seriainumber">{{orderList[index]}}</a>
                <a slot="action" href="javascript:;" slot-scope="text,record" @click="onSee(record)">查看</a>
            </a-table>
        </div>

dsadsadsad  机安静的大萨达 

2.js代码块：

2.1引入一个插件：vue-draggable-resizable

import VueDraggableResizable from 'vue-draggable-resizable'

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

2.2 在data里面配置：

export default {
        data() {
            
this.components = {
                header: {
                    cell: (h, props, children) => {
                        const {
                            key,
                            ...restProps
                        } = props
                        console.log('ResizeableTitle', key)
                        const col = this.columns.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])
                    }
                }
            }
        }
    return {
                pageSizeOptions: ['10', '20', '30', '40', '50'],
                current: 1,
                pageSize: 10,
                total: 0, //默认0条数据
}

2.3 : 注意这里的components在上面html里有用到

2.4: 表格底部滑动配置也在html里面 :pagination="false" :scroll="{x:750 | true, y: 440 }"

记住：表头要给宽度，不然内容少，一屏就能展示出来，也就不存在横向滑动效果了，所以要根据实际情况来