可调整大小的 Vue-good-table 或 Vue [英] Resizable Vue-good-table or Vue

问题描述

我在 Vue.js 中有一个使用 Vue-good-table 制作的表格.

I have a table make with Vue-good-table in Vue.js.

我需要找到一种方法来调整大小.像这样的东西.https://codepen.io/validide/pen/aOKLNo

I need to find a way for do it resizable. Something like this. https://codepen.io/validide/pen/aOKLNo

不幸的是，据我所知，Vue-good-table 没有这个选项.https://github.com/xaksis/vue-good-table/issues/226

Unfortunately, Vue-good-table do not have this option, far as I know. https://github.com/xaksis/vue-good-table/issues/226

我用 JQuery 进行了测试，但我不想混合使用 Jquery 和 Vue，而且我不知道 Jquery 中的库是否可以与此组件一起使用.我测试过，但没有找到.

I tested with JQuery, but I do not want mix Jquery and Vue, and I do not know if a library in Jquery, it will work with this component. I tested but I did not find any.

在 Javascript/css 或 Vue 中有另一种方法可以做到吗?

There is another way in Javascript/css or Vue for do it?

<vue-good-table
            @on-select-all="'selectAll'"
            :columns="columns"
            :rows="rows"
            :select-options="{ enabled: true }"
            @on-selected-rows-change="selectionChanged"
            :sort-options="{
              enabled: true
            }"></<vue-good-table>

谢谢.

推荐答案

将 mounted 方法添加到您的组件中，如下所示:

add mounted method to your component like this:

mounted: function () {
    var thElm;
    var startOffset;

    Array.prototype.forEach.call(
    document.querySelectorAll("table th"),
    function (th) {
        th.style.position = 'relative';

        var grip = document.createElement('div');
        grip.innerHTML = " ";
        grip.style.top = 0;
        grip.style.right = 0;
        grip.style.bottom = 0;
        grip.style.width = '5px';
        grip.style.position = 'absolute';
        grip.style.cursor = 'col-resize';
        grip.addEventListener('mousedown', function (e) {
            thElm = th;
            startOffset = th.offsetWidth - e.pageX;
        });

        th.appendChild(grip);
    });

    document.addEventListener('mousemove', function (e) {
        if (thElm) {
            thElm.style.width = startOffset + e.pageX + 'px';
        }
    });

    document.addEventListener('mouseup', function () {
        thElm = undefined;
    });
}

这篇关于可调整大小的 Vue-good-table 或 Vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！