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

Vue中使用elementui与Sortable.js实现列表拖动排序

• Vue
yizhihongxing

下面我将详细讲解在Vue中如何使用elementui与Sortable.js实现列表拖动排序。

1. 安装ElementUI与Sortable.js

首先，我们需要安装ElementUI和Sortable.js。在终端中使用以下命令安装：

npm install element-ui sortablejs --save

2. 引入ElementUI与Sortable.js

在我们的Vue项目中，我们需要在需要使用的组件中引入ElementUI与Sortable.js：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import Sortable from 'sortablejs';

3. 编写列表组件的HTML结构

编写一个简单的列表组件，其中包含一个可拖动的列表，并在列表中显示一些数据元素。

<template>
  <div>
    <el-card>
      <div class="block">
        <el-button type="primary" @click="add()">添加</el-button>
      </div>
      <ul class="list">
        <li v-for="(item, index) in list" :key="index" class="item">
          <span class="handle">{{ index + 1 }}</span>
          <span class="content">{{ item }}</span>
          <el-button type="danger" size="small" @click="deleteItem(index)">删除</el-button>
        </li>
      </ul>
    </el-card>
  </div>
</template>

4. 添加拖拽功能

在组件的mounted钩子中，我们通过getElementById方法获取到列表中的UL元素，并使用Sortable.js初始化拖拽功能。

mounted() {
  let that = this
  let listEl = document.getElementById('list')
  Sortable.create(listEl, {
    animation: 150,
    onSort: function (evt) {
      that.updateList()
    }
  })
},

这里要注意，在使用Sortable.js的过程中，我们通过调用updateList方法实时更新列表数据。

methods: {
  updateList() {
    this.list = [].slice.call(document.querySelectorAll('.list .item .content')).map(function (item) {
      return item.innerText
    })
  }
}

5. 添加元素

我们在列表的头部添加了一个“添加”按钮，当用户点击按钮时，会弹出一个对话框，让用户输入要添加的新元素。

add() {
  let that = this
  this.$prompt('请输入要添加的内容', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(({ value }) => {
    if (!value) return
    that.list.push(value)
    that.updateList()
    this.$message({
      type: 'success',
      message: '添加成功！'
    })
  })
},

6. 删除元素

在列表元素的右侧，我们添加了一个“删除”按钮，当用户点击该按钮时，会删除该元素。

deleteItem(index) {
  let that = this
  this.$confirm('确定要删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    that.list.splice(index, 1)
    that.updateList()
    this.$message({
      type: 'success',
      message: '删除成功！'
    })
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    })
  })
},

7. 示例说明

示例一

我们有一个包含多个元素的列表，我们希望用户可以将列表元素拖动排序。当用户点击“添加”按钮时，会弹出一个对话框，让用户输入要添加的新元素。当用户点击某个元素右侧的“删除”按钮时，会删除该元素。我们可以通过以下代码实现：

<template>
  <div>
    <el-card>
      <div class="block">
        <el-button type="primary" @click="add()">添加</el-button>
      </div>
      <ul id="list" class="list">
        <li v-for="(item, index) in list" :key="index" class="item">
          <span class="handle">{{ index + 1 }}</span>
          <span class="content">{{ item }}</span>
          <el-button type="danger" size="small" @click="deleteItem(index)">删除</el-button>
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Sortable from 'sortablejs';

export default {
  name: 'SortableList',
  components: {
    ElementUI
  },
  data() {
    return {
      list: ['列表元素1', '列表元素2', '列表元素3']
    }
  },
  mounted() {
    let that = this
    let listEl = document.getElementById('list')
    Sortable.create(listEl, {
      animation: 150,
      onSort: function (evt) {
        that.updateList()
      }
    })
  },
  methods: {
    updateList() {
      this.list = [].slice.call(document.querySelectorAll('.list .item .content')).map(function (item) {
        return item.innerText
      })
    },
    add() {
      let that = this
      this.$prompt('请输入要添加的内容', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value) return
        that.list.push(value)
        that.updateList()
        this.$message({
          type: 'success',
          message: '添加成功！'
        })
      })
    },
    deleteItem(index) {
      let that = this
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.list.splice(index, 1)
        that.updateList()
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
.list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
}

.handle {
  cursor: move;
  margin-right: 10px;
}

.content {
  flex: 1;
  margin-right: 10px;
}

.block {
  text-align: right;
  margin-bottom: 10px;
}
</style>

这个示例中，我们使用Sortable.js的onSort回调函数将列表数据同步更新到Vue组件中。在添加新元素或删除元素时，我们同样需要更新列表数据。

示例二

我们有一个包含多个任务的列表，我们希望用户可以通过拖动列表元素的方式进行排序。当用户点击“添加”按钮时，会弹出一个对话框，让用户输入新任务的标题和描述。当用户点击某个元素右侧的“删除”按钮时，会删除该任务。我们可以通过以下代码实现：

<template>
  <div>
    <el-card>
      <div class="block">
        <el-button type="primary" @click="add()">添加任务</el-button>
      </div>
      <ul id="list" class="list">
        <li v-for="(item, index) in list" :key="item.id" class="item">
          <span class="content">{{ item.title }} {{ item.desc }}</span>
          <el-button type="danger" size="small" @click="deleteItem(item)">删除</el-button>
        </li>
      </ul>
    </el-card>
  </div>
</template>

<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Sortable from 'sortablejs';

export default {
  name: 'SortableList',
  components: {
    ElementUI
  },
  data() {
    return {
      id: 0,
      list: [
        { id: 1, title: '任务1', desc: '任务1描述' },
        { id: 2, title: '任务2', desc: '任务2描述' },
        { id: 3, title: '任务3', desc: '任务3描述' }
      ]
    }
  },
  mounted() {
    let that = this
    let listEl = document.getElementById('list')
    Sortable.create(listEl, {
      animation: 150,
      onSort: function (evt) {
        that.updateList()
      }
    })
  },
  methods: {
    updateList() {
      this.list = [].slice.call(document.querySelectorAll('.list .item')).map(function (item) {
        return {
          id: Number(item.getAttribute('data-id')),
          title: item.querySelector('.content').innerText.trim(),
          desc: item.querySelector('.desc').innerText.trim()
        }
      })
    },
    add() {
      let that = this
      this.$prompt('请输入要添加的任务标题', '添加任务', {
        confirmButtonText: '下一步',
        cancelButtonText: '取消'
      }).then(({ value: title }) => {
        if (!title) return
        this.$prompt('请输入要添加的任务描述', '添加任务', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value: desc }) => {
          if (!desc) return
          that.list.push({
            id: ++that.id,
            title: title,
            desc: desc
          })
          that.updateList()
          this.$message({
            type: 'success',
            message: '添加成功！'
          })
        })
      })
    },
    deleteItem(item) {
      let that = this
      this.$confirm(`确定要删除“${item.title}”吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.list = that.list.filter((i) => i.id !== item.id)
        that.updateList()
        this.$message({
          type: 'success',
          message: '删除成功！'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
.list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
}

.handle {
  cursor: move;
  margin-right: 10px;
}

.content {
  flex: 1;
  margin-right: 10px;
}

.desc {
  opacity: 0.7;
}

.block {
  text-align: right;
  margin-bottom: 10px;
}
</style>

这个示例中，我们在列表元素中添加了任务的标题和描述，并在添加新任务时需要依次输入两个内容。我们通过data-id属性将任务的ID绑定到列表元素上，以便在删除任务时快速查找元素。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue中使用elementui与Sortable.js实现列表拖动排序 - Python技术站

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

相关文章

  • vue component组件使用方法详解

    Vue组件使用方法详解 1. 什么是Vue组件 Vue组件旨在实现代码的复用和组织，将一个大型应用程序的UI拆分成一些独立，可复用组件的它们，使开发更高效。 Vue组件分成全局组件和局部组件。全局组件在任意Vue实例中都可以使用，而局部组件只能在配置它们的Vue实例中使用。 2. 如何创建Vue组件 Vue组件可以通过Vue.component()方法创建，…

    Vue 2023年5月27日
    00

  • Nuxt.js实现一个SSR的前端博客的示例代码

    下面就是“Nuxt.js实现一个SSR的前端博客的完整攻略”。 Nuxt.js简介 Nuxt.js 是一个基于 Vue.js 的通用应用框架，它可以帮助我们快速搭建一个 Vue.js 应用（如 SPA、SSR、静态 生成），并且还提供了自动化的构建和部署功能。 步骤 1. 创建项目 首先，我们需要安装 Node.js 和 Npm。然后，我们可以使用 Npm …

    Vue 2023年5月28日
    00

  • Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

    下面我会详细讲解vuejs-devtools的安装教程及常见问题解决。 什么是Vue.js-devtools Vue.js-devtools是一款为Vue开发者提供的浏览器插件工具，安装后可以帮助开发者调试Vue应用程序并快速定位问题。它可以让你追踪你的Vue实例并且检查组件层次结构、轻松调试样式和查看组件props、data的值等。 安装Vue.js-de…

    Vue 2023年5月27日
    00

  • 详解如何实现在Vue中导入Excel文件

    下面是如何在Vue中导入Excel文件的完整攻略： 1. 安装依赖 为了能够读取Excel文件，我们需要使用一个叫做xlsx的库。可以在终端中使用以下命令安装： npm install xlsx –save 2. 导入Excel文件 在Vue中，我们可以使用<input>标签实现文件上传。一般来说，我们会让用户选择一个Excel文件，然后把文件…

    Vue 2023年5月28日
    00

  • Vue全局事件总线你了解吗

    当进行 Vue 项目开发时，有时需要在组件之间进行通信，常见的方式有props、自定义事件、Vuex等。除了这些方式，还可以使用Vue的全局事件总线来实现组件之间的通信。 什么是Vue全局事件总线？ Vue全局事件总线是通过Vue实例来实现的全局事件总线。Vue实例是一个事件代理，它中转和分发事件通知，从而实现各组件之间的通信。它的实现是通过创建一个Vue实…

    Vue 2023年5月29日
    00

  • 浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

    下面是针对“浅谈vue项目利用Hbuilder打包成APP流程，以及遇到的坑”的完整攻略。 标题 第一步：Hbuilder安装与使用 在Hbuilder官网中下载对应系统的Hbuilder软件 去Hbuilder的官方文档中找打包流程并根据官方文档进行打包操作 打包完成之后，在运行的手机或者模拟器上测试APP的效果，确保APP在打包过程中没有出现问题 第二步…

    Vue 2023年5月27日
    00

  • Vue3中简单使用Mock.js方法实例分析

    让我来详细讲解“Vue3中简单使用Mock.js方法实例分析”的完整攻略。 什么是Mock.js Mock.js是一个前端模拟数据生成库，可以轻松生成随机数据，拦截 Ajax 请求及设置模拟数据，支持为前后端分离开发提供帮助。Mock.js可以帮助前端开发人员快速构建原型，演示和测试。 在Vue开发中，我们可以使用Mock.js来模拟后端接口，以方便本地开发…

    Vue 2023年5月28日
    00

  • 使用vue2.0创建的项目的步骤方法

    下面是使用Vue 2.0创建项目的步骤： 安装Vue CLI Vue CLI是Vue官方提供的脚手架工具，用于快速创建Vue项目。在终端中运行下面的命令安装Vue CLI： npm install -g @vue/cli 创建Vue项目 安装完成后运行下面的命令创建一个Vue项目： vue create my-project 其中“my-project”是项…

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