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

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

• Vue

下面我将详细讲解在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日

相关文章

  • Vue3生命周期函数和方法详解

    Vue3生命周期函数和方法详解 生命周期函数 Vue3中的生命周期函数有如下： beforeCreate 在实例准备被创建之前，也就是数据观测和初始化事件还没开始的时候触发。在这个阶段无法获取到 data 和 methods 中的数据。此时我们可以在此阶段中做一些初始化的操作，如全局变量的初始化。 export default { beforeCreate(…

    Vue 2023年5月28日
    00

  • Vue组件实现评论区功能

    下面是详细讲解 Vue 组件实现评论区功能的完整攻略。 什么是 Vue 组件 Vue 组件就是将一个页面拆分成多个小模块，每个小模块就是一个 Vue 组件。Vue 组件可以重复使用，提高了代码的复用性和可维护性。 Vue 组件实现评论区功能 评论区功能是一个很常见的场景，下面我们来详细讲解如何使用 Vue 组件实现评论区功能。 步骤一：创建评论区组件 首先我…

    Vue 2023年5月29日
    00

  • windows实现npm和cnpm安装步骤

    下面是详细讲解 “Windows 实现 npm 和 cnpm 安装步骤” 的完整攻略。 1. 下载并安装 Node.js 首先需要下载并安装 Node.js。进入 Node.js 官网，选择适合自己操作系统的版本，然后下载并安装。 2. 检查 Node.js 和 npm 是否安装成功 在命令行窗口中输入以下命令： node -v 如果输出 Node.js 的…

    Vue 2023年5月28日
    00

  • vue slot与传参实例代码讲解

    本文将为大家详细讲解Vue中slot与传参的使用方法及实例代码讲解。 什么是Vue中的Slot 在Vue中，我们可以使用组件来构建我们的应用程序。组件允许我们将结构、样式和行为封装在一个可重用的组合单元中。 在某些情况下，我们需要一个组件在父组件中形成一个布局，在不了解内容的情况下。这时，Vue中的插槽（slot）就能派上用场。插槽提供了组件的一种占位符，允…

    Vue 2023年5月28日
    00

  • Vue.js 2.0窥探之Virtual DOM到底是什么？

    Vue.js 2.0窥探之Virtual DOM到底是什么 什么是Virtual DOM 在现代 Web 应用程序开发中，通常会使用 JavaScript 来动态地创建、操作和更新 HTML 页面元素。然而，这种操作不够有效率，需要对整个 DOM 结构进行重新渲染处理，而且更改频繁时还可能导致页面的卡顿甚至崩溃。 为了解决这个问题，Facebook的工程师在…

    Vue 2023年5月27日
    00

  • Vue项目的网络请求代理到封装步骤详解

    下面我将为您讲解“Vue项目的网络请求代理到封装步骤详解”的完整攻略。 一、配置跨域请求代理 在 Vue 项目中，我们要请求后端资源，遇到运行时跨域问题，通常有以下几种解决方案： 1. 使用 JSONP JSONP 通过 script 标签的 src 属性请求服务器获取数据，由于 script 标签的 src 属性不受同源策略限制，所以可以跨域请求。但是 J…

    Vue 2023年5月27日
    00

  • 基于Vue实现支持按周切换的日历

    实现支持按周切换的日历，需要借助Vue.js框架及其丰富的生态工具。本攻略将分为以下几个步骤进行讲解： 初始化Vue项目 安装所需依赖 编写日历组件 实现按周切换功能 下面我们一步一步进行详细的讲解。 1. 初始化Vue项目 在实现日历组件之前，需要先安装Vue并初始化项目。具体步骤如下： # 安装Vue脚手架 npm install -g @vue/cli…

    Vue 2023年5月29日
    00

  • 关于vue项目部署后刷新网页报404错误解决

    针对题目“关于vue项目部署后刷新网页报404错误解决”的问题，我将给出完整攻略，并给出两个示例说明。 问题背景 在vue项目部署后，当在浏览器上进行刷新时，会出现404 Not Found错误，这是因为部署后的静态文件资源没有被正确地映射到服务器的URL路径上。 解决方法 部署vue项目后，需要在服务器端配置URL路径的映射规则，将浏览器请求的URL路径指…

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