标签:www als hang code targe get note ellipsis return
前段时间客户要求table列需要可拖拽功能,狂问度娘,大部分都是从antd官网上面copy的。
极个别的不是,但是含有选择框的就不行了
最后还是找到了: https://www.jianshu.com/p/89b8ccd1eca0
需要用到插件 vue-draggable-resizable,安装最新的就行 无需指定版本
cnpm install --save vue-draggable-resizable
<a-table bordered :columns="columns" :components="components" :row-selection="rowSelection" :data-source="data"> <template v-slot:action> <a href="javascript:;">Delete</a> </template> </a-table>
<script> import Vue from ‘vue‘ import VueDraggableResizable from ‘vue-draggable-resizable‘ Vue.component(‘vue-draggable-resizable‘, VueDraggableResizable) export default { name: ‘arrival‘, computed: { rowSelection() { return { onChange: (selectedRowKeys, selectedRows) => { }, } }, }, data() { this.components = { header: { cell: (h, props, children) => { const { key, ...restProps } = props 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 { data: [ { key: 0, date: ‘2018-02-11‘, amount: 120, type: ‘income‘, note: ‘transfer‘ }, { key: 1, date: ‘2018-03-11‘, amount: 243, type: ‘income‘, note: ‘transfer‘ }, { key: 2, date: ‘2018-04-11‘, amount: 98, type: ‘income‘, note: ‘transfer‘ } ], columns: [ { title: ‘Date‘, ellipsis: true, dataIndex: ‘date‘, width: 200 }, { title: ‘Amount‘, ellipsis: true, dataIndex: ‘amount‘, width: 100 }, { title: ‘Type‘, ellipsis: true, dataIndex: ‘type‘, width: 100 }, { title: ‘Note‘, ellipsis: true, dataIndex: ‘note‘, width: 100 }, { title: ‘Action‘, ellipsis: true, key: ‘action‘, scopedSlots: { customRender: ‘action‘ } } ] } } } </script>
<style> .resize-table-th { position: relative; } .table-draggable-handle { position: absolute; transform: none !important; bottom: 0; height: 100% !important; left: auto !important; right: -5px; cursor: col-resize; touch-action: none; border: none; } </style>
标签:www als hang code targe get note ellipsis return
原文地址:https://www.cnblogs.com/wyhlightstar/p/14922733.html