使用sortablejs对iview的table进行排序

安装

npm安装

$ npm install sortablejs --save

bower安装

 bower install --save sortablejs

直接script引入

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

使用

html代码

	<Table
        ref="tablesMain"
        border
        :data="tableDate"
        :columns="columns">
     </Table>

js代码

import Sortable from 'sortablejs'

export default {
  name: 'banner_eidt',
  data () {
    return {
      columns: [
        {
          type: 'index',
          title: '顺序'
        },
        {
          key: 'id',
          title: 'ID'
        },
        {
          title: 'banner图',
          key: 'cover',
          render: (h, params) => {
            var bannerImg = null
            if (params.row.cover) {
              bannerImg = params.row.cover
              return h('img', {
                attrs: { src: bannerImg },
                style: {
                  width: '100%',
                  height: '100px',
                  padding: '5px 0px 0px 0px',
                  cursor: 'pointer'
                }
              })
            } else {
              return h('span', '/')
            }
          }
        }
      ],
      tableDate: [
        {
          id: 98,
          cover: 'http://api.ad.zhengfenduojin.cn/storage/pages/2020/01/03/5e0ec95b39036.png',
        },
        {
          id: 97,
          cover: 'http://tui.static.colorfulltech.cn/task/2020/04/02/5e856009d722f.jpeg',
        }
      ]
    }
  },
  mounted () {
    this.rowDrop()
  },
  methods: {
    // 表格拖拽排序
    rowDrop() {
      const tbody = document.querySelector('.ivu-table-tbody')
      const _this = this
      var newArr = JSON.parse(JSON.stringify(_this.tableDate))
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = newArr.splice(oldIndex, 1)[0]
          newArr.splice(newIndex, 0, currRow)
          _this.tableDate = []  // 清空之前已有的表格数据
          _this.$nextTick(function () {
            _this.tableDate = newArr // 再次赋值
          })
        }
      })
    },
  }
}