使用sortablejs实现element表格的拖拽功能

由于elment-ui官方文档并没有提供对表格拖拽排序功能的支持，这里使用sortablejs依赖实现需求
期间也是踩坑了几次才调试无误：

1. 一开始是参考站内某博主分享帖，不安装插件也可以实现拖拽排序功能。修改拖拽行css样式 + js操作数据实现。不过后来发现拖拽后顺序是错乱的，且使用数组方法去进行处理页面渲染并不生效，this.$forceUpdate()强制刷新也不行，就放弃了。不过后来在试行第二种方法的时候想到可能是因为el-table没有绑定row-key（原帖未涉及到序号，不需要序号展示/传值或不想安装依赖方式的的小伙伴也可以试试这种方法）
2. 使用sortablejs的时候出现过拖拽后顺序重排不生效、页面渲染生效后提交数据传参还是原始数据等问题，现已解决
   这里分享下页面效果展示和涉及到的代码，我这里需求是要求多个tabs切换属性配置，参考时数据处理需要根据自己代码需求修改

效果:

操作步骤：
第一步 安装依赖

cnpm install sortablejs

第二步 代码引用

            <div class="sec-title">
              <div class="title_info">
                参数配置<el-button
                  v-if="drawerType !== 'detail'"
                  type="text"
                  @click="addRow"
                  icon="el-icon-plus"
                ></el-button>
              </div>
            </div>
            <el-table
              :data="item.tableData"
              :border="theme === 'light-theme'"
              row-key="index"
              stripe
              style="width: 100%"
            >
              <el-table-column label="序号" width="100" align="center">
                <template slot-scope="{ row, $index }">
                  <span>{{ $index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="参数" align="center">
                <template slot-scope="{ row }">
                  <el-select
                    v-if="drawerType !== 'detail' && activeName == '4'"
                    v-model="row.value"
                    :disabled="drawerType === 'detail'"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in $parent.glbmOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                  <el-input
                    v-else-if="drawerType !== 'detail' && activeName !== '4'"
                    v-model="row.value"
                    :disabled="drawerType === 'detail'"
                    clearable
                  ></el-input>
                  <span v-else>{{ row.value }}</span>
                </template>
              </el-table-column>
              <el-table-column
                v-if="drawerType !== 'detail'"
                label="操作"
                width="100"
                align="center"
              >
                <template slot-scope="{ row }">
                  <el-button type="text" icon="el-icon-close" @click="deleteRow(row)"></el-button>
                </template>
              </el-table-column>
            </el-table>

import Sortable from 'sortablejs'

    // 表格行拖拽
    rowDrop() {
      const _this = this
      const tbodyList = this.$el.querySelectorAll('tbody')
      tbodyList.forEach((tbody) => {
        Sortable.create(tbody, {
          animation: 350,
          easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
          onUpdate: function (evt) {
            const tableData = _this.dataList[_this.activeName - 1].tableData || []
            const currRow = tableData.splice(evt.oldIndex, 1)[0]
            tableData.splice(evt.newIndex, 0, currRow)
          }
        })
      })
    },
    // 新增行
    addRow() {
      const tableData = this.dataList[this.activeName - 1].tableData
      tableData.push({
        value: '',
        index: tableData.length // 添加索引属性
      })
      this.reorderIndex(tableData)
    },
    // 删除行
    deleteRow(row) {
      const tableData = this.dataList[this.activeName - 1].tableData
      const index = row.index
      if (index !== -1) {
        tableData.splice(index, 1)
        this.reorderIndex(tableData)
      }
    },
    // 重新设定行索引
    reorderIndex(tableData) {
      tableData.forEach((row, index) => {
        row.index = index
      })
      return tableData
    }