场景

表格数据可以拖拽排序

安装拖拽插件(Sortable)

npm install  sortablejs --save --registry=https://registry.npm.taobao.org

页面引入

import Sortable from "sortablejs";

列表配置项

data() {
  return {
    col: [
      {label: '审批顺序',prop: 'sort'},
      {label: '配置明细',prop: 'type'},
      {label: '创建人',prop: 'createBy'},
      {label: '创建时间', prop: 'createTime'}
    ],
    dropCol: [
      {label: '审批顺序',prop: 'sort'},
      {label: '配置明细',prop: 'type'},
      {label: '创建人',prop: 'createBy'},
      {label: '创建时间',prop: 'createTime'}
    ],
    dataList:[
      {
          "createTime":"2022-02-25 14:47:46",
          "createBy":"admin",
          "id":"1497100990839697410",
          "sort":1,
          "type":"",
          "itcode":"hongli.liu"
      },
      {
          "createTime":"2022-02-25 14:47:46",
          "createBy":"admin",
          "id":"1497100990843891713",
          "sort":2,
          "type":"",
          "itcode":"henghu.li"
      },
      {
          "createTime":"2022-02-25 14:47:46",
          "createBy":"admin",
          "id":"1497100990848086017",
          "sort":3,
          "type":"",
          "itcode":"shiliang.zhou"
      }
 	 ]
  }
}      

初始化行拖拽

// 请保证在页面加载完成后调用rowDrop();如果mounted()中调用无效可以晚一些初始化
mounted() {
	this.rowDrop()
},
methods: {
  rowDrop() {
    const tbody = document.querySelector('.mytable .el-table__body-wrapper tbody')
    const _this = this
    Sortable.create(tbody, {
      onEnd({newIndex, oldIndex}) {
        const currRow = _this.dataList.splice(oldIndex, 1)[0]
        _this.dataList.splice(newIndex, 0, currRow)
        _this.dataList.forEach((item, index) => {
          item.sort = index + 1
        })
      }
    })
  },
}

页面写法

<div class="mytable">
  <el-table
    ref="dragTable"
    v-loading="dataListLoading"
    :data="dataList"
    row-key="id"
    border
    style="width: 100%;margin-top: 16px"
  >
    <el-table-column
      label="序号"
      prop="index"
      type="index"
      width="50"
      align="center"
    />
    <el-table-column v-for="(item, index) in col"
                     :key="`col_${index}`"
                     :type="dropCol[index].type"
                     :prop="dropCol[index].prop"
                     align="center"
                     :label="item.label">
      <template slot-scope="scope">
        <span v-if="dropCol[index].prop==='type'">
          <el-tag v-if="scope.row.type === '01'&&!scope.row.itcode" type="success">直接领导</el-tag>
          <el-tag v-if="scope.row.type === '02'&&!scope.row.itcode" type="success">间接领导</el-tag>
          <el-tag v-if="scope.row.type === '03'&&!scope.row.itcode" type="success">隔级领导</el-tag>
          <el-tag v-if="scope.row.itcode" type="success">{{scope.row.itcode}}</el-tag>
        </span>
        <span v-else>
          {{scope.row[item.prop]}}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      align="center"
      width="150"
      label="操作"
    >
      <template slot-scope="scope">
        <el-button type="text" @click="updateHandler(scope.$index,'edit')" :disabled="disabled">修改</el-button>
        <el-button type="text" @click="updateHandler(scope.$index,'show')">查看</el-button>
        <el-button type="text" @click="delHandler(scope.row.id,scope.$index)" :disabled="disabled">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>