正文

elementuitable顺序拖动(代码片段)

长不大的大灰狼  长不大的大灰狼  2022-12-11  485

关键词：

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元素。

elementuitable实现直接编辑上下移动(代码片段)

ElementUItable直接编辑、上下移动一、直接编辑二、上下移动一、直接编辑演示：代码示例：<!DOCTYPEhtml><html><body><divid="app"><el-row><el-colspan="24"><el-tables 查看详情

elementuitable状态显示:禁用-启用上架-下架(代码片段)

vue2.0+elementUI解决表单上架下架状态的切换https://blog.csdn.net/weixin_42507803/article/details/81910297<el-table-columnlabel="状态"prop="userState"width="100"><templatescope="scope"><div><!-- 查看详情

elementuitable中使用拖拽排序组件sortablejs及注意事项(代码片段)

elementuitable中使用拖拽排序组件sortablejs及注意事项1.使用：先安装sortablejs插件,然后在当前页面引入npminstallsortablejs--saveimportSortablefrom"sortablejs";具体代码如下：<el-tableclass="sortingVisible" 查看详情

elementuitable表格多对一设计合并(代码片段)

<template><BoxCorner><el-containerstyle="border:1pxnone#04c6ee;height:100%"><el-main><el-containerstyle="border:1pxnone#04c6ee;height:100%;background-color:white"><el- 查看详情

elementuitable组件自定义合计栏,后台给的数据(代码片段)

合计的数据是后台传的，所以用table组件自定义一行用来合计<el-tableborderfitv-loading.body="listLoading"element-loading-text="拼命加载中":data="getChannelData"style="width:100%":default-sort 查看详情

elementuitable的多选框：分页选择数据回显，分页保存选中的数据。(代码片段)

<template><el-table@selection-change="handleSelectionChange":row-key="getRowKeys">　　<el-table-columntype="selection":reserve-selecti 查看详情

elementuitable组件固定列底部有一条白线的解决方案(代码片段)

bug:在某一次项目中使用暗色系的固定列时发现有一条白线无法消除（之前项目都是亮色系所以没发现问题）通过排查发现这条白线能够随着el-table__fixed-right元素移动但是却没有任何子元素包含这条线的样式所以一直没有... 查看详情

基于jquery的可拖动列表格插件tadatables(代码片段)

前言最近项目中在使用能够拖动列调整列位置顺序的表格插件---TadaTables,这也是目前我找到的唯一一种存在有这种功能的插件。在查找使用方法的过程中发现可用案例并不多，且大多言语不详。本文将全面介绍此插件的使用过程... 查看详情

记一个react拖动排序中的坑：key(代码片段)

...加排序支持后发现一个问题：数据正确排序了，但是dom的顺序却乱了，找了一会儿原因后发现是因为在渲染数据的时候指定了一个动态的key（map((o,i)=>(<likey=i></li>))），导致了dom顺序混乱。解决方案有：将数据装入模... 查看详情

elementuitable横向滚动条遇到的问题汇总

参考技术A1.横向滚动条且左侧列固定时，滚动条的可操作区域被遮挡，必须点击空白处才可实现拖动，更改样式解决：/deep/#outputTable.el-table__fixed.el-table.el-table__fixedheight:auto!important; bottom:17px!important; /deep/#outp... 查看详情

elementuitable组件固定列底部有一条白线的解决方案(代码片段)

datagrid拖动列头更换排列顺序

在做这个功能的时候在网上找了大量资料,发现都不适用,要不然就是代码太冗余,所以另起炉灶,自己封装了这个函数下面是完整的代码:1<!DOCTYPEhtml>2<html>3<headlang="en">4<metacharset="UTF-8">5<title></title>6<linkrel... 查看详情

elementuitable数据显示效果

效果图:说明:运营成本支出下面存在不确定个子项数据格式:里面还嵌套json数组对象思路:1把json数组对象要显示的数组添加到原数组(8:2000=>id:value)，通过:prop="item.id" item.id是json数组对象的id,因为原数组已经添加了id这个属性... 查看详情

elementuitable左右固定如何调整每个单元格行高

参考技术A固定表头增加height或者表格数据内容太大导致行高不统一，代码处理行高统一为40px.tableClass.cellpadding:0!important;height:40px;line-height:30px!important;text-align:center; 查看详情

react实现拖拽功能(代码片段)

...下相似的功能，顺便学习一下H5的拖拽。不支持拖拽改变顺序，感觉有点麻烦，而且没必要。感觉相关的博文好少的，大部分都是直接上代码，没有解释。图片默认可以拖动，其他元素的拖动效果同图片。正常的div是不能被... 查看详情

javascript单击并拖动(代码片段)

查看详情

selenium(代码片段)

...击、拖动等；当调用ActionChains的方法时，会将所有操作按顺序存入队列当调用perform()方法时，队列中的事件会依次进行 fromseleniumimportwebdriverfromselenium.webdriverimportActionCha 查看详情

actionscript3拖动滚动(代码片段)

查看详情