1. Python技术站首页
  2. 其他
  3. Vue

关于Element UI table 顺序拖动方式

• Vue

关于Element UI table顺序拖动方式，我们需要进行如下步骤：

1. 引入sortablejs和vuedraggable

我们需要先引入sortablejs和vuedraggable这两个库，它们可以帮助我们实现拖拽排序的功能。具体引入方式可以使用CDN或直接下载到本地，这里以使用CDN为例：

<!--引入sortablejs-->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.13.0/Sortable.min.js"></script>
<!--引入vuedraggable-->
<script src="https://cdn.jsdelivr.net/npm/vuedraggable@3.1.0/dist/vuedraggable.min.js"></script>

2. 在table中添加vuedraggable组件

接下来，在我们的table中添加<draggable>标签，将v-model绑定到data中的列表，以便在拖拽排序后，数据能够正确反映。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index)">编辑</el-button>
          <el-button @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <draggable v-model="tableData">
      <el-table :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.$index)">编辑</el-button>
            <el-button @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </draggable>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'; // 引入sortablejs库
  import draggable from 'vuedraggable'; // 引入vuedraggable库

  export default {
    data() {
      return {
        tableData: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'},
          {name: '王五', age: 22, gender: '男'},
        ]
      };
    },
    components: {
      draggable,
      Sortable,
    },
    // ...
  }
</script>

3. 修复拖拽表格中出现的细节问题

在拖拽表格过程中可能会存在一些细节问题，比如拖拽中会出现冒泡事件的问题，需要将其禁止。修复这些问题我们可以在mounted钩子中使用sortablejs，给表格绑定onStart和onEnd方法。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index)">编辑</el-button>
          <el-button @click="handleDelete(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <draggable v-model="tableData" handle=".drag-handle" @start="dragStart" @end="dragEnd">
      <el-table :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button class="drag-handle" icon="el-icon-s-operation"></el-button>
            <el-button @click="handleEdit(scope.$index)">编辑</el-button>
            <el-button @click="handleDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </draggable>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'; // 引入sortablejs库
  import draggable from 'vuedraggable'; // 引入vuedraggable库

  export default {
    data() {
      return {
        tableData: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'},
          {name: '王五', age: 22, gender: '男'},
        ]
      };
    },
    components: {
      draggable,
      Sortable,
    },
    methods: {
      dragStart(event) {
        event.preventDefault();
        event.stopPropagation();
      },
      dragEnd(event) {
        event.preventDefault();
        event.stopPropagation();
        this.$nextTick(() => {
          this.$refs.table.updateColumns();
        });
      },
      handleEdit(index) {
        console.log('edit', index);
      },
      handleDelete(index) {
        console.log('delete', index);
      },
    },
    mounted() {
      this.$nextTick(() => {
        const handle = '.drag-handle';
        const el = document.querySelector('.el-table__body-wrapper tbody');
        const sortable = Sortable.create(el, {
          handle,
          onStart: evt => {
            evt.preventDefault();
            evt.stopPropagation();
          },
          onEnd: evt => {
            evt.preventDefault();
            evt.stopPropagation();
            this.$nextTick(() => {
              this.$refs.table.updateColumns();
            });
          },
        });
      });
    },
  }
</script>

示例说明

下面举两个例子说明：

  1. 拖拽排序后，将结果显示在控制台中，代码如下：
<template>
  <div>
    <draggable v-model="tableData">
      <el-table :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
      </el-table>
    </draggable>
    <el-button @click="printData">打印数据</el-button>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';

  export default {
    data() {
      return {
        tableData: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'},
          {name: '王五', age: 22, gender: '男'},
        ]
      };
    },
    components: {
      draggable,
    },
    methods: {
      printData() {
        console.log(this.tableData);
      },
    },
  }
</script>
  1. 拖拽排序后，重新渲染表格，代码如下：
<template>
  <div>
    <draggable v-model="tableData" @change="reRenderTable">
      <el-table :data="tableData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
      </el-table>
    </draggable>
    <el-button @click="printData">打印数据</el-button>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';

  export default {
    data() {
      return {
        tableData: [
          {name: '张三', age: 18, gender: '男'},
          {name: '李四', age: 20, gender: '女'},
          {name: '王五', age: 22, gender: '男'},
        ]
      };
    },
    components: {
      draggable,
    },
    methods: {
      reRenderTable() {
        this.$nextTick(() => {
          this.$refs.table.$children.forEach(child => {
            child.$forceUpdate();
          });
        });
      },
      printData() {
        console.log(this.tableData);
      },
    },
  }
</script>

以上就是关于Element UI table顺序拖动方式的详细攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于Element UI table 顺序拖动方式 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 深入浅析Vue中的Prop

    深入浅析Vue中的Prop 1. 什么是Prop Prop（属性）是Vue中组件间通信的一种方式，它是父组件向子组件传递数据的一种方式。使用Prop，我们可以将父组件中的数据使用属性的形式传递给子组件使用。 2. Prop的使用 2.1. 在子组件中声明和使用Prop： 在子组件中一般使用props选项声明要接收的数据，接收到的数据会作为子组件的一个属性，可…

    Vue 2023年5月28日
    00

  • 15 分钟掌握vue-next函数式api(小结)

    下面我会详细讲解“15 分钟掌握vue-next函数式api(小结)”的完整攻略。 标题 15 分钟掌握vue-next函数式api(小结) 内容 Vue 3.0中提供了许多新的函数式API，这些API尤其适合组合或动态创建组件。本文将介绍这些API的用途，并通过一些示例来帮助您更好地理解这些函数式API。 1. h 函数 h函数是Vue中用于创建虚拟DOM…

    Vue 2023年5月28日
    00

  • Vue超详细讲解重试机制示例

    Vue超详细讲解重试机制示例 介绍 在实际开发中，我们经常遇到需要重试某个请求的情况，例如网络不稳定或请求失败等情况。Vue提供了一个非常方便易用的重试机制，以解决这个问题。 在本篇文章中，我们将会探讨如何使用Vue的重试机制，并提供两个示例帮助理解。 Vue的重试机制 Vue的重试机制是通过vue-resource库中的retry方法实现的。retry方法…

    Vue 2023年5月28日
    00

  • 详解.NET Core中的数据保护组件

    详解.NET Core中的数据保护组件 什么是数据保护组件？ 数据保护是.NET Core中的一种组件，用于保护应用程序中的敏感数据。在ASP.NET Core中，最常见的使用场景是保护cookie，其它应用场景还包括数据加密、命令行参数加密等等。数据保护组件使用类似于加密解密器的方式，将明文数据转换为不可逆的数据，从而保证数据的安全性。数据保护组件常见的加…

    Vue 2023年5月28日
    00

  • vue+element+oss实现前端分片上传和断点续传

    让我来详细讲解一下“vue+element+oss实现前端分片上传和断点续传”的完整攻略。 前置知识 在开始之前，我们需要确保您已经掌握以下技能： vue.js框架 element-ui组件库 Javascript 阿里云OSS 准备工作 在开始项目之前，您需要准备以下工具： npm包管理器 vue-cli脚手架 项目搭建 首先，我们需要使用vue-cli创…

    Vue 2023年5月28日
    00

  • Vue入门之数量加减运算操作示例

    那我就来详细地讲一下“Vue入门之数量加减运算操作示例”的完整攻略。 一、前置知识 在学习Vue的运算操作之前，需要先掌握一些基本的前置知识： HTML 和 CSS的基础语法：Vue是一种基于HTML和CSS的框架，因此需要熟练掌握HTML和CSS的基本语法。 JavaScript 基础：Vue是通过JavaScript实现的，所以需要熟练掌握JavaScr…

    Vue 2023年5月27日
    00

  • 基于SpringBoot和Vue3的博客平台发布、编辑、删除文章功能实现

    下面我将详细讲解如何基于SpringBoot和Vue3搭建一个简单的博客平台，并实现发布、编辑和删除文章的功能。 准备工作 首先，我们需要搭建开发环境，并且安装必要的工具和依赖。具体的步骤如下： 安装Java SDK：前往 https://www.oracle.com/java/technologies/javase-downloads.html 下载并安装…

    Vue 2023年5月27日
    00

  • vue之延时刷新实例

    关于“vue之延时刷新实例”，可以采用Vue提供的$nextTick()函数来实现。 什么是$nextTick()？ $nextTick()是Vue提供的一种异步更新DOM的方法，因为Vue是响应式的视图层框架，所以只有当数据更新后才能更新DOM，而有时候我们需要等到DOM更新后再进行一些操作，这时候我们就可以使用$nextTick()。 如何使用$next…

    Vue 2023年5月29日
    00
合作推广
合作推广
分享本页
返回顶部