elementui+vue实现表格行拖拽

• 安装

  npm install sortablejs --save
  

• 引入

  import Sortable from 'sortablejs';
  

• 代码

  • template

    注意：在表格上一定要加row-key,否则拖拽效果无效。(row-key的值必须是数据结构tableData中已有的字段否则效果也是无效的)

    <el-table :data="tableData" @selection-change="handleSelectionField" ref="tableFileds" row-key="key"> <!--  注意row-key-->
      <el-table-column type="selection" width="55" :reserve-selection='true'> </el-table-column>
      <el-table-column label="表格字段" prop="name"></el-table-column>
      <el-table-column label="列宽">
        <template slot-scope="scope">
          <div class="flex dialogWidth">
            <el-input v-model="scope.row.width"></el-input>
            <span>Px</span>
          </div>
        </template>
      </el-table-column>
       <!-- 拖拽排序的图标 -->
      <el-table-column label="排序">
        <img src="@/assets/images/icon_sort.svg" class="dragImg" alt="" />
      </el-table-column>
    </el-table>
    

  • 数据结构

    tableData: [
      { key: "productName", name: "配件名称" },
      { key: "specificationName", name: "规格型号" },
      { key: "unitId", name: "计量单位" },
      { key: "unitPrice", name: "单价" },
      { key: "quantity", name: "数量" },
      { key: "amount", name: "金额" }
    ]
    

  • 方法

    mounted(){
    	this.openDialog();
    },
    methods: {
    	openDialog(){
    	  const tbody = document.querySelector('.el-table__body-wrapper tbody');  
          Sortable.create(tbody, {
            animation: 300,
            easing: "cubic-bezier(1, 0, 0, 1)",
            handle: ".dragImg", // 控制拖拽的区域
            onEnd: evt => {
              const targetRow = this.columnData.data.splice(evt.oldIndex, 1)[0];
              this.tableData.splice(evt.newIndex, 0, targetRow);
            }
          })
    	},
    	handleSelectionField(val) {
          val.forEach(element => {
            element.disabled = true;
          });
        }
    },
    

• 效果