Table drag and drop should be a very basic function , The general function is more complete table All plug-ins come with you , And the document is simple and easy to understand , however , I'm here ant-design-vue this ui Component library hit the wall , The example of the expansion column of the official table will report an error if it is pasted, OK , In addition, this function has been mentioned many times , We have to face it bravely !! Then let me use it baidu,google
+ c v
Let's solve the problem with Dafa , As a result, the articles on the Internet are either useless or not easy to use , Then you have to rely on yourself , Here's the code , Before pasting , You need to install two jsx Plug ins and vue-draggable-resizable Drag plug in , It's simple , The order is as follows
npm install --save-dev @vue/babel-preset-jsx
@vue/babel-helper-vue-jsx-merge-props // perhaps yarn add @vue/babel-preset-jsx
@vue/babel-helper-vue-jsx-merge-props -D // then install vue-draggable-resizable plug-in unit
Note that the version number is 2.1.0 npm install vue-draggable-resizable@2.1.0 // perhaps yarn add
vue-draggable-resizable@2.1.0
Then create a new one vue file , Stick the following code on
<script> import Vue from "vue"; import VueDraggableResizable from
"vue-draggable-resizable"; Vue.component("vue-draggable-resizable",
VueDraggableResizable); const columns = [ { title: "Date", dataIndex: "date",
width: 200, }, { title: "Amount", dataIndex: "amount", width: 100, }, { title:
"Type", dataIndex: "type", width: 100, }, { title: "Note", dataIndex: "note",
width: 100, }, { title: "Action", key: "action", scopedSlots: { customRender:
"action" }, }, ]; const draggingMap = {}; columns.forEach((col) => {
draggingMap[col.key] = col.width; }); // const draggingState =
Vue.observable(draggingMap); State sharing , You can add it if you need it vue need 2.6.0 above export default {
name: "sortTable", data() { return { datas: [ { 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", }, ], draggingState: draggingMap,
}; }, render(h) { return ( <a-table bordered columns={columns} components={{
header: { cell: (h, props, children) => { let thDom = null; const { key,
...restProps } = props; const col = columns.find((col) => { const k =
col.dataIndex || col.key; return k === key; }); if (!col.width) { return <th
{...restProps}>{children}</th>; } const onDrag = (x) => {
this.draggingState[key] = 0; col.width = Math.max(x, 1); }; const onDragstop =
() => { this.draggingState[key] = thDom.getBoundingClientRect().width; };
return ( <th {...restProps} v-ant-ref={(r) => (thDom = r)} width={col.width}
class="resize-table-th" > {children} <vue-draggable-resizable key={col.key}
class="table-draggable-handle" w={10} x={this.draggingState[key] || col.width}
z={1} axis="x" draggable={true} resizable={false} onDragging={onDrag}
onDragstop={onDragstop} ></vue-draggable-resizable> </th> ); }, }, }}
data-source={this.datas} ></a-table> ); }, }; </script> <style lang="less">
.resize-table-th { position: relative; .table-draggable-handle { height: 100%
!important; bottom: 0; left: auto !important; right: -5px; cursor: col-resize;
touch-action: none; } } </style>
okay , Now you're looking to see if you can drag ? no way ? I'll help you with the message

Technology
©2019-2020 Toolsou All rights reserved,
Huawei 2021 session Hardware Engineer Logical post (FPGA) Super detailed surface !!!Vue-element-admin upgrade ui edition virtual machine VMware Download and install the most detailed tutorial !C++ Move constructor and copy constructor sound of dripping water java Backstage interview pygame Realize full screen mode and adjustable window size mysql Database setting character set configuration modification my.ini file (windows)30 What's the experience of being a junior programmer at the age of 20 C++ Multithreading programming ( Summary of common functions and parameters )python_ cherry tree