element UIテーブルは、行の高さと列の幅をドラッグして変更することを実現します.

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);
        }
    }
};