昆山做网站的公司,西安晨曦e动网站建设,电脑机箱定制网站,深圳专业建网站原因 由于我的表头是由数组循环遍历生成的#xff0c;而选择列不在数组内#xff0c;只能在循环外定义el-table-column#xff0c;造成拖动时索引错乱错误代码 el-tableheader-dragendheaderDragendidout-table:datastate.sliceTable而选择列不在数组内只能在循环外定义el-table-column造成拖动时索引错乱错误代码 el-tableheader-dragendheaderDragendidout-table:datastate.sliceTableborderstriperefTableRef:row-keygetRowKeys(pageData)el-table-column typeselection width55 fixed /
template v-for(item, index) in state.pageDataTitle :keyindex el-table-column:propitem.value:labelitem.name:keyindextemplate #defaultscopeslot :nameitem.value :scopescope{{ scope.row[item.value] }}/slot/template/el-table-column/template/el-table
解决办法 向数组开头push一条 typeselection 的对象 并把el-table-column 写到循环体内 template v-for(item, index) in state.pageDataTitle :keyindexel-table-column typeselection v-ifitem.type width55 fixed /el-table-column:propitem.value:labelitem.name:keyindextemplate #defaultscopeslot :nameitem.value :scopescope{{ scope.row[item.value] }}/slot/template/el-table-column/template 当拖动选择列 或 拖向选择列时 仍然会造成拖动顺序混乱 所以我们要禁止掉给el-table-column添加 class-nameallowdrag 表示除了选择列之外都可以拖动 el-table-columnclass-nameallowdrag:labelitem.name:keyindextemplate #defaultscopeslot :nameitem.value :scopescope{{ scope.row[item.value] }}/slot/template/el-table-column//拖拽列
const columnDrop2 (dom) {if (!dom) returnSortable.create(dom.$el.querySelector(.el-table__header-wrapper.el-table__header tr), {handle: .allowdrag, //除了选择列都可以选择onEnd: (sortableEvent) {const targetThElem sortableEvent.item;const wrapperElem targetThElem.parentNode;const newIndex sortableEvent.newIndex;const oldIndex sortableEvent.oldIndex;const oldTrElement wrapperElem.children[oldIndex];const currRow state.pageDataTitle?.splice(oldIndex, 1)[0];state.pageDataTitle?.splice(newIndex, 0, currRow);if (newIndex oldIndex) {wrapperElem.insertBefore(targetThElem, oldTrElement)} else {wrapperElem.insertBefore(targetThElem,oldTrElement ? oldTrElement.nextElementSibling : oldTrElement)}},})
}
这样解决了选择列向其他列拖动 但没有解决其他列向选择列拖动 解决办法 添加 :header-cell-class-nametableRowClassName 并添加onMove方法 el-table:header-cell-class-nametableRowClassNameidout-table:datastate.sliceTablerefTableReftemplate v-for(item, index) in state.pageDataTitle :keyindexel-table-column typeselection v-ifitem.type width55 fixed /el-table-columnclass-nameallowdrag:propitem.value:labelitem.name:keyindextemplate #defaultscopeslot :nameitem.value :scopescope{{ scope.row[item.value] }}/slot/template/el-table-column/template/el-table
//解决向选择列拖动的bugfunction tableRowClassName(row) {if (row.columnIndex 0) {return filtered;}return ;}
//拖拽列
const columnDrop2 (dom) {if (!dom) returnSortable.create(dom.$el.querySelector(.el-table__header-wrapper.el-table__header tr), {handle: .allowdrag,onEnd: (sortableEvent) {const targetThElem sortableEvent.item;const wrapperElem targetThElem.parentNode;const newIndex sortableEvent.newIndex;const oldIndex sortableEvent.oldIndex;const oldTrElement wrapperElem.children[oldIndex];const currRow state.pageDataTitle?.splice(oldIndex, 1)[0];state.pageDataTitle?.splice(newIndex, 0, currRow)if (newIndex oldIndex) {wrapperElem.insertBefore(targetThElem, oldTrElement)} else {wrapperElem.insertBefore(targetThElem,oldTrElement ? oldTrElement.nextElementSibling : oldTrElement)}},//解决向选择列拖动的bugonMove(e) {return e.related.className.indexOf(filtered) -1;}})
}
完整代码 el-table:header-cell-class-nametableRowClassNameidout-table:datastate.sliceTablerefTableReftemplate v-for(item, index) in state.pageDataTitle :keyindexel-table-column typeselection v-ifitem.type width55 fixed /el-table-columnclass-nameallowdrag:propitem.value:labelitem.name:keyindextemplate #defaultscopeslot :nameitem.value :scopescope{{ scope.row[item.value] }}/slot/template/el-table-column/template/el-table
//拖拽列
const columnDrop2 (dom) {if (!dom) returnSortable.create(dom.$el.querySelector(.el-table__header-wrapper.el-table__header tr), {handle: .allowdrag,onEnd: (sortableEvent) {const targetThElem sortableEvent.item;const wrapperElem targetThElem.parentNode;const newIndex sortableEvent.newIndex;const oldIndex sortableEvent.oldIndex;const oldTrElement wrapperElem.children[oldIndex];const currRow state.pageDataTitle?.splice(oldIndex, 1)[0];state.pageDataTitle?.splice(newIndex, 0, currRow)if (newIndex oldIndex) {wrapperElem.insertBefore(targetThElem, oldTrElement)} else {wrapperElem.insertBefore(targetThElem,oldTrElement ? oldTrElement.nextElementSibling : oldTrElement)}},//解决向选择列拖动的bugonMove(e) {return e.related.className.indexOf(filtered) -1;}})
}//解决向选择列拖动的bugfunction tableRowClassName(row) {if (row.columnIndex 0) {return filtered;}return ;}
效果图 QQ录屏20231211155823
