使用sortablejs对elementUi的table进行排序

最新推荐文章于 2024-08-20 16:59:06 发布

胖哒哒

最新推荐文章于 2024-08-20 16:59:06 发布

阅读量1.2k

点赞数 1

分类专栏： element Table table vue 文章标签： vue html

本文链接：https://blog.csdn.net/qq_42925966/article/details/105484760

版权

vue 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

element Table

3 篇文章 1 订阅

订阅专栏

table

2 篇文章 0 订阅

订阅专栏

安装

npm安装

$ npm install sortablejs --save

bower安装

 bower install --save sortablejs

直接script引入

<script src="../../js/Sortable.min.js"></script>

使用

html代码

<template>
    <div class="landingPageList">
      <el-table :data="tableData"
      border
      row-key="id">
        <el-table-column
          align="center"
          label="顺序">
          <template slot-scope="scope">
            <el-tag>
              {{scope.$index + 1}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="图片样式">
          <template slot-scope="scope">
            <img :src="scope.row.image_url" alt="" style="width: 40px;height: 40px;">
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="跳转链接">
          <template slot-scope="scope">
            {{scope.row.spread_link}}
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

js代码

<script>
  import Sortable from 'sortablejs'
  export default {
    props: {
    },
    data() {
      return {
        tableData: [
          {
            image_url: '111',
            spread_link: 'www.baidu.com'
          },
          {
            image_url: '222',
            spread_link: 'www.baidu.com'
          }
        ]
      };
    },
    mounted() {
      // 表格行拖拽
      this.rowDrop()
      // 表格列拖拽
      // this.columnDrop()
    },
    methods: {
      rowDrop() {
        const tbody = document.querySelector('.el-table__body-wrapper tbody')
        const _this = this
        var newArr = JSON.parse(JSON.stringify(_this.tableData))
        Sortable.create(tbody, {
          onEnd({ newIndex, oldIndex }) {
            const currRow = newArr.splice(oldIndex, 1)[0]
            newArr.splice(newIndex, 0, currRow)
            // 重新排序完的表格数据
            _this.tableData = []
            _this.$nextTick(function () {
              _this.tableData = newArr
            })
          }
        })
      },
      //列拖拽
      // columnDrop() {
      //   const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      //   this.sortable = Sortable.create(wrapperTr, {
      //     animation: 180,
      //     delay: 0,
      //     onEnd: evt => {
      //       const oldItem = this.dropCol[evt.oldIndex]
      //       this.dropCol.splice(evt.oldIndex, 1)
      //       this.dropCol.splice(evt.newIndex, 0, oldItem)
      //     }
      //   })
      // }
    }
  };
</script>