elementui+vue实现表格行拖拽

最新推荐文章于 2025-03-28 13:35:03 发布

smile@qingqing

最新推荐文章于 2025-03-28 13:35:03 发布

阅读量897

点赞数

分类专栏：前端——vue 文章标签： sortablejs elementui vue

本文链接：https://blog.youkuaiyun.com/weixin_43363871/article/details/119203055

版权

前端——vue 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Sortable.js实现表格列的拖拽排序，包括必要的row-key设置和事件处理。通过实例展示了如何在el-table组件中集成Sortable，并提供数据结构和相关方法实现动态排序功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装
```
npm install sortablejs --save
```
引入
```
import Sortable from 'sortablejs';
```

代码

template

注意：在表格上一定要加row-key,否则拖拽效果无效。(row-key的值必须是数据结构tableData中已有的字段否则效果也是无效的)

<el-table :data="tableData" @selection-change="handleSelectionField" ref="tableFileds" row-key="key"> <!--  注意row-key-->
  <el-table-column type="selection" width="55" :reserve-selection='true'> </el-table-column>
  <el-table-column label="表格字段" prop="name"></el-table-column>
  <el-table-column label="列宽">
    <template slot-scope="scope">
      <div class="flex dialogWidth">
        <el-input v-model="scope.row.width"></el-input>
        <span>Px</span>
      </div>
    </template>
  </el-table-column>
   <!-- 拖拽排序的图标 -->
  <el-table-column label="排序">
    <img src="@/assets/images/icon_sort.svg" class="dragImg" alt="" />
  </el-table-column>
</el-table>

数据结构

tableData: [
  { key: "productName", name: "配件名称" },
  { key: "specificationName", name: "规格型号" },
  { key: "unitId", name: "计量单位" },
  { key: "unitPrice", name: "单价" },
  { key: "quantity", name: "数量" },
  { key: "amount", name: "金额" }
]

方法

mounted(){
	this.openDialog();
},
methods: {
	openDialog(){
	  const tbody = document.querySelector('.el-table__body-wrapper tbody');  
      Sortable.create(tbody, {
        animation: 300,
        easing: "cubic-bezier(1, 0, 0, 1)",
        handle: ".dragImg", // 控制拖拽的区域
        onEnd: evt => {
          const targetRow = this.columnData.data.splice(evt.oldIndex, 1)[0];
          this.tableData.splice(evt.newIndex, 0, targetRow);
        }
      })
	},
	handleSelectionField(val) {
      val.forEach(element => {
        element.disabled = true;
      });
    }
},

效果