[JavaScript知识库]Element 实现Table组件实现拖拽效果

一、使用的 Sortable.js
效果
二、引入插件

npm install sortablejs --save

三、代码

<el-table v-loading="loading" :data="listList" row-key="id" align="left"  style="width:100%;" v-bind:height="windowHeight * 0.81" id="el-table">
          <el-table-column label="序列" type="index" width="50"/>
          <el-table-column label="事件" align="center" prop="event">
            <template slot-scope="scope">
              <el-input v-model="scope.row.event"
                        v-on:blur="blurs({id:scope.row.id,event:scope.row.event,webTable:scope.row.webTable})"
                        placeholder="请输入内容事件"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center" prop="type">
            <template slot-scope="scope">
              <el-input v-model="scope.row.type"
                        v-on:blur="blurs({id:scope.row.id,type:scope.row.type,webTable:scope.row.webTable})"
                        placeholder="请输入内容类型"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="时间" align="center" prop="sendTime">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sendTime"
                        v-on:blur="blurs({id:scope.row.id,sendTime:scope.row.sendTime,webTable:scope.row.webTable})"
                        placeholder="请输入内容时间"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="指令类别" align="center" prop="orderType"></el-table-column>
          <el-table-column label="系统名称" align="center" prop="subSystem"></el-table-column>
          <el-table-column label="指令名称" align="center" prop="orderName"></el-table-column>
          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-bottom"
                @click="zIndexUp(scope.$index)"
              >下移

              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-top"
                @click="zIndexDown(scope.$index)"
              >上移
              </el-button>

              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="ListsDelete(scope.$index)"
              >移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

data() {
    return {
      //实时屏幕高度
      windowHeight: document.documentElement.clientHeight,   
      // 遮罩层
      loading: false,
      // 指令表格数据
      listList: [], 
    }
  },
   mounted() {
    // 阻止默认行为
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
    this.rowDrop()
  },
  methods: {
  //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.listList.splice(oldIndex, 1)[0]
          _this.listList.splice(newIndex, 0, currRow)
        }
      })
    }
 }

详细可参照这个博客：https://blog.csdn.net/shykevin/article/details/117102734

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖