表格行拖动排序？element ui + vue + Sortable

 先来看看效果

表格拖拽操作

安装Sortable

npm i sortablejs --save

在需要使用的地方引入Sortable

import Sortable from 'sortablejs'

使用方法

首先要给表格加上 row-key="id"，因为我这里有三个联动的表格，所以给每个表格加上了唯一id

        <el-table
          ref="dataTable"
          :data="sceneList"
          highlight-current-row
          border
          row-key="id"
          id="sence-tbody"
          style="width: 100%"
          :header-cell-style="{
            background: '#f0f0f0',
            color: '#333',
            height: '28px'
          }"
          :row-style="{ height: '28px' }"
          :cell-style="{ padding: '4px' }"
        >
          <el-table-column
            align="center"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="left"
            label="场景名称"
            prop="name"
          ></el-table-column>
        
          <el-table-column width="160" align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="detailPord(scope.row)"
                >查看产品</el-button
              >
            </template>
          </el-table-column>
        </el-table>

       <el-table
        ref="pordTable"
        :data="produceList"
        highlight-current-row
        border
        row-key="id"
        id="pord-tbody"
        style="width: 100%"
        :header-cell-style="{
          background: '#f0f0f0',
          color: '#333',
          height: '28px'
        }"
        :row-style="{ height: '28px' }"
        :cell-style="{ padding: '2px' }"
      >
        <el-table-column
          align="center"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="left"
          label="产品名称"
          prop="name"
        ></el-table-column>
        <el-table-column align="center" width="280" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="showChild(scope.row, 822746444562432, (showTable = 1))"
              >功能模块</el-button
            >
          </template>
        </el-table-column>
      </el-table>

       <el-table
        ref="childTable"
        :data="moduleList"
        highlight-current-row
        border
        row-key="id"
        i