element UI table表格实现拖拽改变行高和列宽

项目有一个需求，表格要像Excel一样实现行高、列宽的拖拽改变，列宽elementUI自带了，行高参考网上的案例自己撸改了一个。大致的长相如下：

DEMO.vue 文件

<template>
    <div class="container">
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            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 = document.getElementsByClassName("el-table__body")[0];
            //如果不用数组，最后遍历的时候不能有【】这个来选取元素
            let headerRows = new Array();
            for (let i = 0; i < tblObj.rows.length; i++) {
                //只有rows这个能选，col要先选rows，然后用cells
                headerRows[i] = tblObj.rows[i].cells[0];
            }
            // 去头部的位置
            let headerTds = document.getElementsByClassName("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);
            }

            document.onmousedown = function(event) {
                if (this.resizeable) {
                    let evt = event || window.event;
                    this.mousedown = true;
                    screenYStart = evt.screenY;
                    tdHeight = this.targetTd.offsetHeight;
                    headerHeight = tblObj.offsetHeight;
                }
            };
            document.onmousemove = function(event) {
                let evt = event || window.event;
                let srcObj = self.getTarget(evt);
                //rowIndex是未定义！！！cellIndex是好用的。我应该获取的是tr的rowindex
                //获取偏移 这里是鼠标的偏移
                let offsetY = evt.offsetY;
                if (this.mousedown) {
                    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;
                        this.resizeable = true;
                        srcObj.style.cursor = "row-resize"; //修改光标样式
                    } else if (evt.offsetY <= 8 && evt.offsetX > 8) {
                        if (srcObj.parentNode.rowIndex) {
                            this.targetTd =
                                tblObj.rows[
                                    srcObj.parentNode.rowIndex - 1
                                ].cells[0];
                            this.resizeable = true;
                            srcObj.style.cursor = "row-resize";
                        }
                    } else if (
                        srcObj.offsetHeight - evt.offsetY > 8 &&
                        srcObj.offsetWidth - evt.offsetX <= 8
                    ) {
                        srcObj.style.cursor = "column-resize"; //修改光标样式
                    } else if (evt.offsetY > 8 && evt.offsetX <= 8) {
                        if (srcObj.parentNode.rowIndex) {
                            srcObj.style.cursor = "column-resize";
                        }
                    } else {
                        this.resizeable = false;
                        srcObj.style.cursor = "default";
                    }
                }
            };
            //放开鼠标恢复原位
            document.onmouseup = function(event) {
                this.tartgetTd = null;
                this.coltargetTd = null;
                this.resizeable = false;
                this.mousedown = false;
                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>