拖拽表格

 <draggable

          v-model="tablelst"

          chosenClass="chosen"

          forceFallback="true"

          group="people"

          animation="1000"

          @start="onStart"

          @end="onEnd"

        >

          <transition-group>

            <el-row

              v-for="ele in tableData"

              :key="ele.id"

              style="display: flex; justify-content: space-around; align-items: center"

            >

              <el-col>

                <div>{{ ele.name || "无" }}</div>

              </el-col>

              <el-col>

                <div>{{ ele.partyOrgName || "无" }}</div>

              </el-col>

              <el-col>

                <div>{{ ele.orgAttribute || "无" }}</div>

              </el-col>

              <el-col>

                <div>{{ ele.processStatus || "无" }}</div>

              </el-col>

              <el-col>

                <el-tag :type="getTagType(ele.type)">

                  {{

                  dicMap[

                  "com.sinosoft.springbootplus.common.enums.MeetingAgendaTypeEnum"

                  ][ele.type] &&

                  dicMap[

                  "com.sinosoft.springbootplus.common.enums.MeetingAgendaTypeEnum"

                  ][ele.type].label

                  }}

                </el-tag>

              </el-col>

              <el-col>

                <div

                  style="

                    display: flex;

                    justify-content: space-around;

                  "

                >

                  <el-button

                    style="margin-right: 5px"

                    @click="EditClick(ele)"

                    type="text"

                    size="small"

                  >编辑</el-button>

                  <el-popconfirm title="确定删除吗？" @confirm="deleClick(ele)">

                    <el-button

                      style="margin-right: 5px"

                      slot="reference"

                      type="text"

                      size="small"

                    >删除</el-button>

                  </el-popconfirm>

                  <el-button @click="detailClick(ele)" type="text" size="small">详情</el-button>

                </div>

              </el-col>

            </el-row>

          </transition-group>

        </draggable>

js：

 1. //开始拖拽事件

    onStart() {

      this.drag = true;

    },

    //拖拽结束事件

    2.onEnd(e) {

      console.log(e);

      this.tablelst.forEach((item, i) => {

        item.sort = i + 1;

      });

      console.log(this.tablelst);

      this.tableData = this.tablelst;

      console.log(e); // 这里将会有调整前后的 index 及其他可能需要传递给接口的信息

      this.drag = false;

      this.draggablesave();

    },

    3.draggablesave() {

      let tablelst = [];

      this.tablelst.forEach(ele => {

        let obj = { sort: ele.sort, id: ele.id };

        tablelst.push(obj);

      });

      let tabDat = {};

      tabDat.updSinosoftMeetingAgendaRelationDtoList = tablelst;

      draggableSave(tabDat).then(res => {

        if (res.code != 200) {

          this.$message.error("失败");

        } else {

          this.$message.success("成功");

        }

      });

    },