vue2 表格拖拽排序

表格的每行都是可以随意拖动，任意排序的。

下载一个拖动的插件：sortable.js

 

下载：  $ npm install sortablejs --save

引用：import Sortable from 'sortablejs';

代码：

 

        <!-- 一定要绑定row-key -->
        <el-table
          :data="tableData"
          class="view-table"
          height="92%"
          stripe
          row-key="uuid"
          default-expand-all
          :header-cell-style="{
            background: '#2B2D60',
            color: '#FFFFFF',
            fontWeight: 500
          }"
        >
          <el-table-column
            v-for="(item, index) in tableBox"
            :key="`tableBox_${index}`"
            :prop="tableBox[index].prop"
            :label="item.label"
            :width="item.label == '工作组名称' ? '150px' : ''"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="查看 "
                placement="top"
              >
                <i
                  class="icon_chakanhuaguo iconfont table-btn"
                  @click="handleCheck(scope.row)"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

 

js代码：

      tableData: [],

      tableBox: [

        {

          label: '工作组名称',

          prop: 'planWorkGroupName'

        },

        {

          label: '成员单位',

          prop: 'orgNameStr'

        },

        {

          label: '工作组职责',

          prop: 'jobDescription'

        }

      ],

// 获取用户表
    getList() {
      let obj = {
        columnTempId: this.kindId,
      };
      listApi(obj).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          //绑定uuid，以防和数据id混乱
          this.tableData.map(val => {
            val.uuid = val.id;
          });
          this.rowDrop();//行拖拽
        }
      });
    },
//行拖拽
    rowDrop() {
      //拿到表格元素
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          //tableData为表格数据
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
          let idList = [];
          _this.tableData.map(val => {
            idList.push(val.id);
          });
          let data = {
            idList: idList
          };
          //只要拖动就调后台接口进行保存，并刷新
          updateSortApi(data).then(res => {
            if (res.data.code === 200) {
              this.getList();
            }
          });
        }
      });
    },