需求：vue+element-ui+sortable.js表格行和列拖拽(宽度自定义)

<template>   <div style="padding: 15px">     <h3 style="text-align: left; padding: 10px; background: #ccc">       vue+element-ui+sortable.js表格行和列拖拽     </h3>     <!-- 属性border可实现单元格拖拽获得字段宽度的改变--`@header-dragend`具体参考官网的方法 -->     <el-table       ref="dataTable"       :data="customColumnList"       class="customer-table"       border       row-key="id"       align="left"       @select="handleSelectionChange"     >       <el-table-column         type="selection"         :selectable="checkSelectable"         align="center"         width="55"       ></el-table-column>       <el-table-column prop="label" label="字段名" width="180">         <template slot-scope="scope">           {{ scope.row.label }}         </template>       </el-table-column>       <el-table-column prop="width" label="宽度" width="180">         <template slot-scope="scope">           <div class="right-box">             <p style="padding-right: 5px">宽度</p>             <el-input               style="width: 60px"               size="mini"               type="text"               v-model="scope.row.width"               @keyup.enter.native="this.rowDrop()"             ></el-input>             <p style="padding-left: 5px">px</p>           </div>         </template>       </el-table-column>     </el-table>   </div> </template>

<script> import Sortable from "sortablejs"; export default {   name: "login",   data() {     return {       customColumnList: [         {           id: 1,           label: "linger1",           width: "220",         },         {           id: 2,           label: "linger2",           resizable: false,           width: "70",         },         {           id: 3,           label: "linger3",           width: "150",         },         {           id: 4,           label: "linger4",           width: "120",           resizable: false,         },         {           id: 5,           label: "linger5",           width: "200",           resizable: false,         },       ],       hasSelectList: [1, 5, 2],     };   },   mounted() {     this.getTableData();     this.rowDrop();   },   methods: {     getTableData() {       // 默认选中       this.$nextTick(() => {         this.customColumnList.forEach((row) => {           if (this.hasSelectList.indexOf(row.id) >= 0) {             this.$refs.dataTable.toggleRowSelection(row, true);           }         });       });     },     // 监听复选框的选择     handleSelectionChange(section) {       this.hasSelectList = section.map((item) => item.id);       const List = this.customColumnList.filter((item) =>         section.map((items) => items.id).some((_item) => item.id === _item)       );       // 排序后的列表       console.log(List);       // console.log(this.hasSelectList);     },     // 设置失效的行数id=5不可勾选     checkSelectable(row) {       if (row.id !== 5) {         return true         }     },     //行拖拽     rowDrop() {       const tbody = document.querySelector(".el-table__body-wrapper tbody");       const _this = this;       Sortable.create(tbody, {         onEnd({ newIndex, oldIndex }) {           const currRow = _this.customColumnList.splice(oldIndex, 1)[0];           _this.customColumnList.splice(newIndex, 0, currRow);           console.log(_this.customColumnList);         },       });       console.log(_this.customColumnList);     },     //列拖拽     // columnDrop() {     //   const wrapperTr = document.querySelector(".el-table__header-wrapper tr");     //   console.log("wrapperTr:", wrapperTr);     //   this.sortable = Sortable.create(wrapperTr, {     //     animation: 180,     //     delay: 0,     //     handle: ".move", // 只有带move类名的元素才能拖动,多选框禁止拖动     //     onEnd: (evt) => {     //       // 因为手动加了一个多选框, 不在表头循环数组内, 所以这里减1     //       let oldIndx = evt.oldIndex - 1;     //       let newIndx = evt.newIndex - 1;     //       const oldItem = this.dropCol[oldIndx];     //       // 真正改变列数据--变化列头，就能实现列拖动 列数据按列头索引取值 {{ scope.row[dropCol[index].prop] }}     //       this.dropCol.splice(oldIndx, 1); // 删除旧一行 删除为1     //       this.dropCol.splice(newIndx, 0, oldItem); // 插入新一行 插入为0     //     },     //   });     // },   }, }; </script>

<style scoped> .right-box {   display: flex;   justify-content: center;   align-items: center; } </style> <style> /* 取消单元格的列的border */ .el-table--border .el-table__cell {   border: none; } .el-table--border, .el-table--group {   border: none; } /* 去掉表格单元格边框 */ /* 头部边框设置 */ /*  表格最外边框 */ .el-table--border, .el-table--group {   border: none; } .customer-table thead tr th.is-leaf{   border: 1px solid #EBEEF5;   border-right: none; } .customer-table thead tr th:nth-last-of-type(2){   border-right: 1px solid #EBEEF5; } </style>