Resizable Vue-good-table 或者 Vue

Question

我在 Vue.js 中用 Vue-good-table 制作了一个 table。

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

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

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

Javascript/css 或 Vue 中还有另一种方法吗？

<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>

谢谢。

Answer 1

为什么不使用您自己的原始 JavaScript 解决方案创建无渲染包装组件？像这样：

http://jsfiddle.net/thrilleratplay/epcybL4v/

(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 = "&nbsp;";
        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;
    });
})();

不需要使用jQuery。您可以使用自定义无渲染组件包装 table，并使用 this.$el 和 document.querySelector.

更深入地研究其插槽组件

Answer 2

你可以在 vanillajs 中试用这个库 https://github.com/MonsantoCo/column-resizer

<div id="app">
  <table border="1" ref="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>
</div>

<script>
    new Vue({
      el: "#app",
      data: {},

      mounted() {
        let resizable = ColumnResizer.default

        new resizable(this.$refs.table, {
          liveDrag:true,
          draggingClass:"rangeDrag",
          gripInnerHtml:"<div class='rangeGrip'></div>",
          minWidth:8
        })
      }
    })
</script>

https://jsfiddle.net/Wagner/eywraw8t/414137/

Answer 3

像这样向您的组件添加 mounted 方法：

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 = "&nbsp;";
        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;
    });
}

Resizable Vue-good-table 或者 Vue

Resizable Vue-good-table or Vue

javascript

resizable

vue.js

vue-component