前端开发vue表格行拖拽到别的容器进行数据交互

最近一个小伙伴问我表格拖拽怎么做，我以只为只是拖一下表格行，网上组件插件很多，就随口说下班帮他搞一下，

下班深入了解需求是他们做将表格行拖到别的容器做数据交互，所以加了二个多小才搞好，中间踩了一个细小的坑，

整 体思路是拖动时记录表格行数据到内存，拖到目标后，目录对像从内存中获取数据增加进来，

测试代码效果如下：（代码环境vue2.5  element_ui ）

 

 

 

所以代码记录一下以后会记

如果是用element-ui  的话拖动事件需要加

@dragstart.native="(event) => handleDragStart(event, scope.row)"

原生表格行拖动就简单 一些
  @drop="handleDrop(index, $event)"

测试代码完整 如下：

<template>
  <div id="app">
    <div class="payment-containers">
      <div
          v-for="(container, index) in containers"
          :key="index"
          class="payment-container"
          @drop="handleDrop(index, $event)"
          @dragover.prevent
      >
        <h3>{{ container.title }}</h3>
        <div>{{ container.count }} items</div>
      </div>
    </div>
    <el-table
        ref="tableRef"
        :data="tableData"
        row-key="id"
        @dragover.prevent
    >
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="amount" label="Amount"></el-table-column>
      <el-table-column label="Actions">
        <template slot-scope="scope">
          <el-button
              type="text"
              :draggable="true"
        @dragstart.native="(event) => handleDragStart(event, scope.row)"
          >
            Drag
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>export default {
  data() {
    return {
      containers: [
        { title: '微信支付', count: 0 },
        { title: '支付宝支付', count: 0 },
        { title: '滴滴支付', count: 0 }
      ],
      tableData: [
        { id: 1, name: 'Payment 1', amount: 100 },
        { id: 2, name: 'Payment 2', amount: 200 },
        { id: 3, name: 'Payment 3', amount: 300 }
      ]
    };
  },
  methods: {
    handleDragStart(event, row) {
      if (!event || !event.dataTransfer) {
        console.error('Event dataTransfer is undefined');
        return;
      }
      const data = JSON.stringify(row);
      console.log("初始化时获取当前地信息",data)
      event.dataTransfer.setData('text/plain', data);
    },

    handleDrop(containerIndex, event) {
      const rowDataString = event.dataTransfer.getData('text/plain');
      if (rowDataString) {
        try {
          const rowData = JSON.parse(rowDataString);
          this.moveRowToContainer(containerIndex, rowData.id);
        } catch (error) {
          console.error('Failed to parse JSON:', error);
        }
      } else {
        console.error('No data found in event.dataTransfer');
      }
    },
    moveRowToContainer(containerIndex, rowId) {
      const index = this.tableData.findIndex(row => row.id === rowId);
      if (index > -1) {
        const [movedRow] = this.tableData.splice(index, 1);
        movedRow.paymentContainer = this.containers[containerIndex].title;
        this.containers[containerIndex].count++;
        console.log('Moved row to container:', movedRow);

        // 触发表格更新
        this.$refs.tableRef.doLayout();
      }
    }
  }
};
</script>

<style>.payment-containers {
  display: flex;
  justify-content: space-around;
}

.payment-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  width: 30%;
  text-align: center;
}
</style>

 

增加一个跳转www.baidu.com