首页 > 其他分享 >el-table拖动排序

el-table拖动排序

时间:2023-04-19 20:44:27浏览次数:31  
标签:el oldIndex 拖动 tbody table tableData newIndex

html

 <el-table ref="multipleTable" :data="tableData" align="left" border class="mytable" row-key="id">
            <el-table-column :index="indexMethod" align="center" type="index"></el-table-column>
            <el-table-column label="字段名称" prop="description"></el-table-column>
            <el-table-column align="center" label="在表头显示" prop="titleShowFlag" width="210px">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.titleShowFlag" active-color="#13ce66"
                               inactive-color="#dcdfe6"></el-switch>
                </template>
            </el-table-column>
        </el-table>

js

import Sortable from 'sortablejs' // 引入插件
mounted() {
      this.$nextTick(() => {
        this.rowDrop() // 行拖拽
      })
}
methods:{
// 行拖拽
    rowDrop () {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd ({ newIndex, oldIndex }) {
          if (newIndex === oldIndex) return
          _this.tableData.splice(newIndex, 0, _this.tableData.splice(oldIndex, 1)[0])
          var newArray = _this.tableData.slice(0)
          _this.tableData = []
          _this.$nextTick(function () {
            _this.tableData = newArray
          })
        }
      })
    }
}

标签:el,oldIndex,拖动,tbody,table,tableData,newIndex
From: https://www.cnblogs.com/whh666/p/17334555.html

相关文章

  • 如何采集百度地图上搜索电话,导出到excel里去
      很多销售推广人员问,怎么样能够快速的把BAIDU地图左边的搜索列表里的商家地图,电话采集出来,导出到EXCEL里。我就开发了一个小软件,专门为快速的实现导出数据到EXCEL。  为了使用方便,已经将全国的所又省份,每个省份里包含的地级市,每个地级市包含的区县,都收集数据集成到......
  • 如何采集高德地图商家电话资料,导出成excel里?
     有很多人问我地图商家电话采集怎么做?怎么样能够快速的把高德地图左边的搜索列表里的商家地图,电话采集出来,导出到EXCEL里?如何快速地将高德地图里的商家电话资料导出EXCEL? 操作步骤:1.选择你要采集的省份,城市列表里就会有相应的省份的城市列表。2.选择要采集的城市,......
  • helm _helpers.tpl 文件用法
    templates目录下⾯除了NOTES.txt文件和以下划线_开头命令的文件之外,都会被当做kubernetes的资源清单文件,而这个下划线开头的文件不会被当做资源清单外,还可以被其他chart模板中调用命名模板我们也可以称为子模板,是限定在⼀个文件内部的模板,然后给⼀个名称,在使用命名模板的......
  • helm 常用语法
     values.yamlimage:repoprefix:harbor.com/libraryrepository:nginxpullPolicy:IfNotPresenttag:"0.1.1"---{{-$image:=printf"%s/%s:%s".Values.image.repoprefix.Values.image.repository.Values.image.tag}}apiVersion:......
  • 程序员必备上传服务器Xftp及连接服务器工具Xshell
    1.下面截图为破解工具,点击执行就可以用了 ......
  • ELK日志分析系统
    拓扑图:推荐步骤:搭建ElaticSearch群集,通过浏览器查看和图形管理群集配置客户端装apache和logstash服务配置采集apache日志配置kibana监听elasticsearch服务器日志实验步骤:一、搭建Elaticsearch群集,通过浏览器查看和图形管理群集1、配置第一台Elaticsearch服务器(1)修改hosts文件复制......
  • Intellij Idea开发: 手把手教你Java GUI开发,并且打包成可执行Jar程序
    ---------------------------------------------生活的意义并不是与他人争高下,而在于享受努力实现目标的过程,结果是对自己行动的嘉奖。↑面的话,越看越不痛快,应该这么说:生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!......
  • Userful shell commoand in linux
     Userfulshellcommoandinlinuxcreatefolderlist:mkdir{com,xxx,yyy,zzz,domain,enums} createfolderstructure:mkdir-pcom/xxx/yyy/xzzz/domain/enums grantthepermisstionforthewholefolder(includesubfolder):chmod777-Rfolder/ removefolders:rm -Rf......
  • bash shell notes:
    #!/bin/bashconfig_file='xxxxx'tmp_file=/tmp/tempfile.$$functionusage(){cat<<!usage:$(basename$0)optionsoptionsaaaswitchtoaaabbbswitchtobbbcccswitchtoccc!exit9}cmd=$1if[$#-eq0];......
  • Shell多线程备份数据库
    Shell这么简单的脚本语言有多线程这一说吗?答案是有的。只不过它实现起来稍微有点难理解罢了,因为它借助了命名管道实现。所谓多线程就是原本由一个进程完成的事情现在由多个线程去完成。假如一个进程需要10小时完成的事情,现在分配10个线程,给他们分工,然后同时去做这件事情,最终可能就......