如何拖放html表列？
如何拖放html表列？
提问于 2019-07-26 16:21:51
我有一张html表格。我想拖放列，而不是行。我正在使用vue.js。
拖放行很容易，因为每一行都有自己的父元素，您可以在父元素中传递draggable="true"。对于列，每个列都包含在它的父级中，即row。因此，我不能将原生draggable="true"传递给表的整个列。
然后我找到了这个库：https://github.com/kutlugsahin/vue-smooth-dnd，但这并没有给我提供拖拽列的选项。
我怎样才能实现我想要的？如果可以使用上面的插件，那会更好。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-07-26 18:23:20
我正在使用Element UI中的一个表，并编写了一个自定义方法来设置拖放：
initializeDragAndDropFunctionality() {
const tableColumn = this.$refs.tableRef.$el.querySelector(
'.el-table__header-wrapper .el-table__header thead tr'
);
Sortable.create(tableColumn, {
draggable: 'th',
onEnd: this.dragReorderColumn
});
}它在组件挂载时调用：
mounted() {
this.initializeTable();
},在表中，您需要为ref设置一个值：
<el-table
ref="tableRef"
>
<el-table-column
v-for="(column, index) in tableTitles"
:label="column.title"
:prop="column.field"
:width="column.width"
>
</el-table-column>
</el-table>该组件导入一个使用Sortablejs的util类：
import Sortable from 'sortablejs';
const vueSortable = {
...Sortable,
create(el, options) {
function swap(draggableSelector, movedElement, oldIndex, newIndex) {
const parent = movedElement.parentNode;
const cells = parent.querySelectorAll(draggableSelector);
if (oldIndex > newIndex) {
parent.insertBefore(movedElement, cells[newIndex]);
} else {
// inserts after trs[oldIndex] - if nextSibling is null insertBefore puts item to the end
parent.insertBefore(movedElement, cells[newIndex].nextSibling);
}
}
const tmpStorage = {};
const newOptions = {
...options,
onEnd(evt) {
swap(options.draggable, evt.item, evt.newIndex, evt.oldIndex);
tmpStorage.onChange = undefined;
if (options.onEnd) {
try {
options.onEnd(evt);
} catch (ex) {
console.error('Error at onEnd:', ex);
}
}
}
};
return Sortable.create(el, newOptions);
}
};
export default vueSortable;Stack Overflow用户
发布于 2020-06-14 10:42:38
我还想拖动表中的一列。我找到了这个解决方案。所有你需要做的就是重新排序头部密钥，数据将被重新渲染。
<el-table border :data="tableData" size="mini" >
<el-table-column
v-for="(item, index) in elTheadList"
:prop="dataTheadList[index]"
:label='item'
:key="`thead_${index}`"
>
</el-table-column>
</el-table>
data() {
return {
tableData: [{
date: '2016-05-01',
name: 'Cristian Millan',
address: 'Baja #11'
},{
date: '2016-05-02',
name: 'Jorge Cabrera',
address: 'Progreso #18'
},{
date: '2016-05-03',
name: 'Armando Mendivil',
address: 'Novena #12'
}],
dataTheadList: [
'date',
'name',
'address'
],
elTheadList: ['Date', 'Name', 'Address'],
}
},
mounted() {
const el = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(el, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dataTheadList[evt.oldIndex]
this.dataTheadList.splice(evt.oldIndex, 1)
this.dataTheadList.splice(evt.newIndex, 0, oldItem)
}
})
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57215952
复制相关文章
相似问题
腾讯云开发者
