vue中 el-table 实现拖拽排序教程

最新推荐文章于 2023-12-28 11:03:32 发布

砥砺前行前程似锦

最新推荐文章于 2023-12-28 11:03:32 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/weixin_44834981/article/details/125022283

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

el-table基础上如何实现表格上下拖拽排序

element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。

实现步骤：

1.安装Sortable.js

npm install --save sortablejs

2.在当前vue中JS代码中引入：

import Sortable from ‘sortablejs’

3.在当前vue文件template el-table中指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。

<el-table
          ref="table"
          :data="apiObj"
          row-key="id"
          @selection-change="selectionChange"
          :paginationLayout="'prev, pager, next'"
        >

项目完整代码：

<template>
  <div class="dic-data">
    <el-container>
      <el-header>
         <el-button type="primary" @click="saveSortData(apiObjDrag)"
              >排序保存</el-button
            >
      </el-header>
      <el-main class="nopadding">
        <el-table
           stripe
          ref="table"
          :data="apiObj"
          row-key="id"
          @selection-change="selectionChange"
          :paginationLayout="'prev, pager, next'"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            label="字典键"
            prop="dictKey"
            align="left"
          ></el-table-column>
          <el-table-column
            label="字典值"
            prop="dictValue"
            align="left"
          ></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import Sortable from 'sortablejs'

export default {
  name: 'data',
  data() {
    return {
      dialog: {
        new: false,
      },
      apiObj: [
        {
          dictKey:'你好',
          dictValue:'aa'
        },
        {
          dictKey:'我好',
          dictValue:'bb'
        },
        {
          dictKey:'他好',
          dictValue:'cc'
        }
      ],
      apiObjDrag: [],
    }
  },
  created() {
    // this.getDictDatalist()
    this.$nextTick(() => {
      this.rowDrop()
    })
  },
  methods: {
    //行-拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.apiObj.splice(oldIndex, 1)[0]
          _this.apiObj.splice(newIndex, 0, currRow)
          //   拖动后获取newIdex
          let arr = Array.from(_this.apiObj)
          _this.apiObjDrag = arr.map((item, index) => {
            return {
              id: item.id,
              dictSort: index,
            }
          })
        },
      })
    },
    // 排序后，把拖动后的结果穿啊给后端
    async saveSortData(apiObjDrag) {
      if (apiObjDrag == '') {
        // this.$message.warning("请先拖动字典数据，再点击");
        return
      }
      const res = await this.$API.system.dict.data.sort.post(apiObjDrag)
      if (res.code == '2000') {
        this.$message.success('排序成功')
      } else {
        this.$alert(res.msg, '提示', { type: 'error' })
      }
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection
    },
  },
}
</script>

————————————————
版权声明：本文为CSDN博主「和世界不一样，那就不一样！」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44834981/article/details/125022283