vue+element table实现表格行列拖拽效果(以及控制关闭拖拽)

最新推荐文章于 2024-08-14 10:36:35 发布

Eal7

最新推荐文章于 2024-08-14 10:36:35 发布

阅读量4.1k

点赞数 2

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/slow097/article/details/125271605

版权

本文介绍了如何在Vue项目中结合Element UI实现表格的行列拖拽功能，并详细说明了如何控制拖拽的开启和关闭。关键点在于保持`dropCol`和`col`两个数组分别用于标题和数据排序，通过操作对象来控制拖拽行为的启停。

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

1.安装

npm install sortablejs --save-dev

2.使用

<template>
  <div class="app-container">
    <template>
      <el-table
        :data="tableData"
        row-key="id"
        style="width: 100%"
      >
        <el-table-column
          v-for="(item, index) in col"
          :key="`col_${index}`"
          :prop="dropCol[index].prop"
          :label="item.label"
        />
      </el-table>
    </template>

  </div>
</template>

<script>
import Sortable from 'sortablejs'
export default {
  name: 'DragTable',
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',