element表格表头通过tree组件实现可拖拽改变表头位置以及显示隐藏某个表头
1.再data中定义 tableColumns(名字随意)数据 例如
tableColumns: [
{
id: 1,
label: "序号",
prop: "id",
disabled: true,
fixed: true,
visible: true,
width: 100,
},
{
id: 2,
label: "情况",
prop: "visitCircumstanceStr",
disabled: false,
visible: true,
width: 150,
},
{
id: 3,
label: "姓名",
prop: "stuName",
disabled: false,
visible: true,
width: 150,
},
]
visible: true 控制表头显示与隐藏,初始值为true(显示)
2.table组件使用v-for 遍历 tableColumns 中的值
3.在tree组件绑定 tableColumns 数据
<el-tree
ref="tree"
:data="tableColumns"
show-checkbox
node-key="id"
default-expand-all
:default-checked-keys="checkArray"
@check-change="handleCheckChange"
@node-drag-start="handleDragStart"
@node-drop="handleDrop"
:allow-drop="allowDrop"
draggable
>
</el-tree>
data:展示的数据;
show-checkbox:节点是否可被选择 ;
node-key:唯一标识 ;
default-expand-all:是否默认展开所有节点;
default-checked-keys:默认勾选的节点的 key 的数组;
@check-change:节点选中状态发生变化时的回调;
@node-drag-start:节点开始拖拽时触发的事件;
@node-drop:拖拽成功完成时触发的事件;
:allow-drop:拖拽时判定目标节点能否被放置;
draggable:是否开启拖拽节点功能;
checkArray(名字随意):默认勾选的值;在data中定义 checkArray和dragBool
//默认check的树节点
checkArray: [],
//是否推拽中
dragBool: false,
1.节点选取改变
// 节点选取改变
handleCheckChange(val, checked) {
this.tableColumns.forEach((item, index) => {
if (item.id === val.id) {
item.visible = checked;
}
});
//$nextTick在DOM更新后调用doLayout方法重新计算表格布局
this.$nextTick(() => {
this.$refs.table.doLayout();
});
localStorage.setItem("tableColumns", JSON.stringify(this.tableColumns));
},
2.开始拖拽
//开始拖拽
handleDragStart(node, ev) {
this.dragBool = node.data.visible;
},
3.拖拽放下
handleDrop(draggingNode, dropNode, dropType, ev) {
setTimeout(() => {
let array = [];
this.tableColumns.forEach((item, key) => {
if (item.id === draggingNode.data.id && this.dragBool)
this.tableColumns[key].visible = true;
});
this.tableColumns.forEach((item) => {
if (item.visible) array.push(item.id);
});
this.dragBool = false;
this.$refs.tree.setCheckedKeys(array);
}, 0);
},
4.放下
//放下
allowDrop(draggingNode, dropNode, type) {
if (draggingNode.level === dropNode.level) {
//同级
if (draggingNode.parent.id === dropNode.parent.id) {
// 向上拖拽 || 向下拖拽
return type === "prev" || type === "next";
}
}
},