elementUItable表格实现拖拽改变⾏⾼和列宽
项⽬有⼀个需求，表格要像Excel⼀样实现⾏⾼、列宽的拖拽改变，列宽elementUI⾃带了，⾏⾼参考⽹上的案例⾃⼰撸改了⼀个。⼤致的长相如下：
DEMO.vue ⽂件
<template>
<div class="container">
<el-table
:data="tableData"
row-key="id"
border
default-expand-all
v-if="tableShow"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="date" label="⽇期" sortable width="180"></el-table-column>
<el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 表格展⽰的token
tableShow: false,
/
/ ⾏⾼改变的⼀些字段
targetTd: null,
coltargetTd: null,
resizeable: false,
mousedown: false,
// 表格样例数据
tableData: [
{
id: 1,
date: "2016-05-02",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1518 弄"
},
{
id: 2,
date: "2016-05-04",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1517 弄"
},
{
id: 3,
date: "2016-05-01",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1519 弄",
children: [
{
id: 31,
date: "2016-05-01",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1519 弄"
},
{
id: 32,
date: "2016-05-01",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1519 弄"
}
]
},
{
id: 4,
date: "2016-05-03",
name: "王⼩虎",
address: "上海市普陀区⾦沙江路 1516 弄"
}
],
};
},
mounted() {
// 这⾥⽐较重要，在表格dom渲染完成后，再进⾏事件的添加操作
this.tableShow = true;
this.$nextTick(() => {
// 表格添加列宽变化
this.tableInit();
});
},
methods: {
tableInit() {
let self = this;
/* 获取头部td集合，这边是测试表格，只有⼀个所以直接el-table__body 的0，后续可以在<el-table> 加class，再⽤querySelector
*/
let tblObj = ElementsByClassName("el-table__body")[0];
//如果不⽤数组，最后遍历的时候不能有【】这个来选取元素
let headerRows = new Array();
for (let i = 0; i < ws.length; i++) {
//只有rows这个能选，col要先选rows，然后⽤cells
headerRows[i] = ws[i].cells[0];
}
// 去头部的位置
let headerTds = ElementsByClassName("el-table__body")[0]
.rows[0].cells;
let screenYStart = 0;
let tdHeight = 0;
let headerHeight = 0;
for (let i = 0; i < headerRows.length; i++) {
//添加头部单元格事件
this.addListener(headerRows[i], "mousedown", onmousedown);
this.addListener(headerRows[i], "mousemove", onmousemove);
}
if (sizeable) {
let evt = event || window.event;
screenYStart = evt.screenY;
tdHeight = this.targetTd.offsetHeight;
headerHeight = tblObj.offsetHeight;
}
};
let evt = event || window.event;
let srcObj = Target(evt);
//rowIndex是未定义cellIndex是好⽤的。我应该获取的是tr的rowindex
//获取偏移这⾥是⿏标的偏移
let offsetY = evt.offsetY;
if (usedown) {
let height = tdHeight + (evt.screenY - screenYStart) + "px"; //计算后的新的宽度，原始td+偏移                    this.targetTd.style.height = height;
tblObj.style.height =
headerHeight + (evt.screenY - screenYStart) + "px";
} else {
//修改光标样式，ele原来头部的不能影响，于是有⼀些offset位置的判断，如有更好的⽅式请留⾔                    if (
srcObj.offsetHeight - evt.offsetY <= 8 &&
srcObj.offsetWidth - evt.offsetX > 8
) {
this.targetTd = srcObj;
srcObj.style.cursor = "row-resize"; //修改光标样式
} else if (evt.offsetY <= 8 && evt.offsetX > 8) {
if (wIndex) {
this.targetTd =
wIndex - 1
].cells[0];
srcObj.style.cursor = "row-resize";
}
} else if (
srcObj.offsetHeight - evt.offsetY > 8 &&
srcObj.offsetWidth - evt.offsetX <= 8element表格横向滚动条
) {
srcObj.style.cursor = "column-resize"; //修改光标样式
} else if (evt.offsetY > 8 && evt.offsetX <= 8) {
if (wIndex) {
srcObj.style.cursor = "column-resize";
}
} else {
srcObj.style.cursor = "default";
}
}
};
//放开⿏标恢复原位
this.tartgetTd = null;
document.body.style.cursor = "default";
};
},
// 得到⽬标值事件
getTarget(evt) {
return evt.target || evt.srcElement;
},
// 添加监听
addListener(element, type, listener, useCapture) {
//这是两种写法，对应不同浏览器
element.addEventListener
element.addEventListener(type, listener, useCapture)                : element.attachEvent("on" + type, listener);
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss" scoped>
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。