antd + vuedraggable 实现行拖动

antd+vuedraggable 实现行拖动

antd的弹窗默认是不支持拖拽的,所以...

app.vue文件

js 复制代码
<template>
  <div style="margin: 24px">
    <a-table :columns="columns" :dataSource="dataSource" :components="components">
      <template v-slot:action>
        <a href="javascript:;" class="drag-handle" style="cursor: move;">拖动</a>
      </template>
    </a-table>
  </div>
</template>

<script>
const CustomWrapper = ()=> import('./components/CustomWrapper.vue');
const columns = [
  {
    title: "id",
    dataIndex: "id",
    sorter: true,
    width: "20%",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "Gender",
    dataIndex: "gender",
    filters: [
      { text: "Male", value: "male" },
      { text: "Female", value: "female" },
    ],
    width: "20%",
  },
  {
    title: "Email",
    dataIndex: "email",
  },
  {
    title: 'Action',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];

export default {
  name: "App",
  provide() {
    return {
      data: this,
    };
  },
  data() {
    return {
      columns,
      components: {
        body: {
          wrapper: CustomWrapper,
        },
      },
      dataSource: [{
        id:1,
        key: 0,
        date: '2018-02-11',
        amount: 120,
        type: 'income',
        note: 'transfer',
      },
      {
        id:2,
        key: 1,
        date: '2018-03-11',
        amount: 243,
        type: 'income',
        note: 'transfer',
      },
      {
        id:3,
        key: 2,
        date: '2018-04-11',
        amount: 98,
        type: 'income',
        note: 'transfer',
      }],
    };
  },
  mounted(){
  
  },
  methods: {
     listChange(list){
       
     }
  },
};
</script>

<style></style>

CustomWrapper.vue文件

js 复制代码
<template>
  <Draggable ghostClass="ghost" tag="tbody" v-model="data.dataSource" @change="onChange" handle=".drag-handle">
    <slot></slot>
  </Draggable>
</template>
<script>
import Draggable from "vuedraggable";

export default {
  name: 'CustomWrapper',
  components: {
    Draggable
  },
  inject: ["data"],
  data() {
    return {
      
    };
  },
  mounted() {
  
  },
  methods: {
    onChange(evt) {
      this.data.listChange(this.data.dataSource)
    }
  }

};
</script>

文章来源:章鱼
http://114.55.234.134/article/6707a6da9a143e8ffe896fb4

相关推荐
im_AMBER17 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦43 分钟前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码44 分钟前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.1 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
计算机毕业设计木哥1 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的快递物流仓库管理系统【源码+文档+调试】
java·vue.js·spring boot·后端·课程设计
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
苏打水com2 小时前
JavaScript 面试题标准答案模板(对应前文核心考点)
javascript·面试
Wx-bishekaifayuan2 小时前
基于微信小程序的社区图书共享平台设计与实现 计算机毕业设计源码44991
javascript·vue.js·windows·mysql·pycharm·tomcat·php
DoraBigHead2 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js