草庐IT

Element UI table 顺序拖动

长不大的大灰狼 2024-05-23 原文

Element UI table 顺序拖动

使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。

new Sortable(example1, {
    animation: 150,
    ghostClass: 'blue-background-class'
});

官网：
[1] Sortable.js官网配置项说明等
[2] Sortable更多使用示例

一、基本使用

1、安装

npm install sortablejs --save

2、引用

import Sortable from 'sortablejs'

3、使用

    <el-table
      id="table"
      :data="list"
      row-key="id"
      style="width: 500px"
    >
      <el-table-column
        prop="name"
        label="称"
        width="180"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="handle"
            size="mini"
          ><i class="el-icon-rank" /> 移动</el-button>
        </template>
      </el-table-column>
    </el-table>


<script>
  // 引用 Sortable
  import Sortable from 'sortablejs'
  export default {
    data() {
      return {
        list: []
      }
    },
    mounted() {
      this.rowDrop();
    },
    methods: {
      //行拖拽,排序方法
      rowDrop() {
      // 获取对象
        const el = document.querySelector('#ability-table .el-table__body-wrapper tbody')
        const self = this
	  // 配置
	    var ops = {
          handle: ".handle",
          onEnd({ newIndex, oldIndex }) {
            self.list.splice(newIndex, 0, self.list.splice(oldIndex, 1)[0])
            const newArray = self.list.slice(0)
            newArray.forEach((value, index) => {
            value.orderNum = index + 1 //序号为index+1
            self.$set(newArray, index, value)
	       
	        self.list= [] //
	        self.$nextTick(() => {
	          self.list= newArray ? newArray : []
	        })
		}
        Sortable.create(el,ops)
      },
    }
</script>

说明：
orderNum：为排序号
handle： 使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动

Array.splice() 方法有三个参数：

  • index ：规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
  • howmany：要删除的项目数量。如果设置为 0，则不会删除项目。
  • item1, ..., itemX ：向数组添加的新项目。

注意：

  • newArray = Array.splice(0): 表示将原数组赋给新数组，并将原数组清空。
  • 要在el-table渲染后调用 this.rowDrop(); 方法
  • 组件绑定是根据Id绑定的：document.querySelector('#ability-table .el-table__body-wrapper tbody')，要注意父组件Id和子组件Id不要重名，否则会优先绑定到父组件对应的Id元素。
Elementtablespanclasstokenvue前端elementui

有关Element UI table 顺序拖动的更多相关文章

  1. ruby - Chef 执行非顺序配方 - 2

    我遵循了教程http://gettingstartedwithchef.com/,第1章。我的运行list是"run_list":["recipe[apt]","recipe[phpap]"]我的phpapRecipe默认Recipeinclude_recipe"apache2"include_recipe"build-essential"include_recipe"openssl"include_recipe"mysql::client"include_recipe"mysql::server"include_recipe"php"include_recipe"php::modul

  2. ruby-on-rails - 在 RSpec 中，如何以任意顺序期望具有不同参数的多条消息？ - 2

    RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的，所以我不能对这些方法调用添加期望。 最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法，用allowstub，除了方法名称之外没有任何约束，调用该方法，然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)

  3. ruby - 按数字(从大到大)然后按字母(字母顺序)对对象集合进行排序 - 2

    我正在构建一个小部件来显示奥运会的奖牌数。我有一个“国家”对象的集合，其中每个对象都有一个“名称”属性，以及奖牌计数的“金”、“银”、“铜”。列表应该排序:1.首先是奖牌总数2.如果奖牌相同，按类型分割(金>银>铜，即2金>1金+1银)3.如果奖牌和类型相同，则按字母顺序子排序我正在用ruby​​做这件事，但我想语言并不重要。我确实找到了一个解决方案，但如果感觉必须有更优雅的方法来实现它。这是我做的:使用加权奖牌总数创建一个虚拟属性。因此，如果他们有2个金牌和1个银牌，加权总数将为“3.020100”。1金1银1铜为“3.010101”由于我们希望将奖牌数排序为最高的，因此列表按降序排

  4. ruby - 以随机顺序将数组拆分为多个数组 - Ruby - 2

    我试图在每次运行时以随机顺序将一个名称数组拆分为多个数组。我知道如何拆分它们:name_array=["bob","john","rob","nate","nelly","michael"]array=name_array.each_slice(2).to_a=>[["bob","john"],["rob","nate"],["nelly","michael"]]但是，如果我希望它每次都以随机顺序吐出它们怎么办？ 最佳答案 在做同样的事情之前，打乱数组。(Array#shuffle)name_array.shuffle.each_s

  5. ruby - 根据给定顺序对数字数组进行排序 - 2

    我有两个数组。第一个数组包含排序顺序。第二个数组包含任意数量的元素。我的属性是保证第二个数组中的所有元素(按值)都在第一个数组中，而且我只处理数字。A=[1,3,4,4,4,5,2,1,1,1,3,3]Order=[3,1,2,4,5]当我对A进行排序时，我希望元素按照Order指定的顺序出现:[3,3,3,1,1,1,1,2,4,4,4,5]请注意，重复是公平的游戏。A中的元素不应更改，只能重新排序。我该怎么做？ 最佳答案 >>source=[1,3,4,4,4,5,2,1,1,1,3,3]=>[1,3,4,4,4,5,2,1,1

  6. ruby - 按键数组中的顺序对 Ruby 哈希进行排序 - 2

    我有一个散列:sample={bar:200,foo:100,baz:100}如何使用sort_order中的键顺序对sample进行排序:sort_order=[:foo,:bar,:baz,:qux,:quux]预期结果:sample#=>{foo:100,bar:200,baz:100}我能想到的就是new_hash={}sort_order.each{|k|new_hash[k]=sample[k]unlesssample[k].nil?}sample=new_hash必须有更好的方法。提示？不应该出现没有值的键，即键的数量保持不变，SortHashKeysbasedonord

  7. ruby - 按字段的字母顺序对数组中的哈希进行排序 - 2

    我认为这很容易，并且已经很努力地搜索过，但似乎无法让它工作。我有以下哈希:@friends=[{"name"=>"JohnSmith","id"=>"12345"},{"name"=>"JaneDoe","id"=>"23456"},{"name"=>"SamuelJackson","id"=>"34567"},{"name"=>"KateUpton","id"=>"45678"}]我正在尝试按名称的字母顺序对其进行排序。现在我正在这样做:@friends.sort{|a,b|a[0]b[0]}但是，它只是以非字母顺序输出完整结果。 最佳答案

  8. ruby - 输出顺序 - 2

    下面的代码:defaprint"Function'a'called\n"99endprint"a=",a,"\n"产生:Function'a'calleda=99为什么function'a'called首先显示？我希望首先显示a=。 最佳答案 在将参数传递给方法之前，会对它们进行求值(这样您就有了要传递的值)。对函数a调用的评估有打印"function'a'called的副作用。这就是它首先打印的原因。 关于ruby-输出顺序，我们在StackOverflow上找到一个类似的问题：

  9. ruby - 控制多机 Vagrant block 执行顺序 - 2

    我有一个多机vagrant设置，其中包含一些我需要更改执行顺序的block。由于vagrant顺序是从外到内，最嵌套的block最后执行。我需要一种方法来使供应block更加嵌套，以便它们最后执行。我尝试添加mach.vm.define但这些block没有执行，我不明白为什么。正常执行，顺序错误Vagrant.require_version">=1.6.0"VAGRANTFILE_API_VERSION="2"require'yaml'machines=YAML.load_file('vagrant.yaml')Vagrant.configure(VAGRANTFILE_API_VER

  10. ruby - 交集完成后，顺序是否保留在数组中？ - 2

    当我对两个数组进行交集时，是否可以保证生成的顺序基于第一个数组的顺序？例如，如果我有a=[1,2,3]b=[3,2,1]可以a&b返回[3,2,1]，而不是[1,2,3](这是什么我希望)？我在RDoc或Pickaxe的Array文档中找不到任何直接解决这个问题的内容。RubySpec有一个规范，它createsanarraywithelementsinordertheyarefirstencountered，但我是否应该假设YARVRuby会遵守该规范？ 最佳答案 看起来这是一项有保证的功能。他们在revision39415中升级

随机推荐