antd 结合vue 行拖拽

最新推荐文章于 2024-10-10 18:16:33 发布

程皮蛋瘦肉

最新推荐文章于 2024-10-10 18:16:33 发布

阅读量1.5k

点赞数 5

文章标签： vue.js ant

本文链接：https://blog.csdn.net/m0_57457086/article/details/123212482

版权

本文介绍了如何在Vue项目中结合Ant Design（antd）实现数据表格的行拖拽功能。通过设置data1为数据源，rowKey作为唯一标识，展示了拖拽过程，并指出该方法仅改变显示顺序，如需数据互换位置，需额外处理数据。

摘要由CSDN通过智能技术生成

      <a-table :columns="columns1"
               :pagination="false"
               :data-source="data1"
               rowKey='id'
               :customRow="customRow"
               bordered>
        <span slot="customTitle">Name</span>
      </a-table>

data1为获取到的数据 rowKey为key值（值唯一即可）

下面为拖拽方法

customRow (record,index) {
  return {
    // FIXME: draggable： true 先使用鼠标移入事件设置目标行的draggable属性
    props: {
      // draggable: 'true'
    },
    style: {
      cursor: 'pointer'
    },
    on: {
      // 鼠标移入
      mouseenter: (event) => {
        // 兼容IE
        var ev = event || window.event
        ev.target.draggable = true
      },
      // 开始拖拽
      dragstart: (event) => {
        // 兼容IE
        var ev = event || window.event
        // 阻止冒泡
        ev.stopPropagation()
        // 得到源目标数据