Изменяемый размер Vue-good-table или Vue - PullRequest
Новая
       20

Изменяемый размер Vue-good-table или Vue

0 голосов
/ 11 октября 2018

У меня есть таблица с Vue-good-table в Vue.js.

Мне нужно найти способ сделать его изменяемым.Что-то вроде этого.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>

Спасибо.

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Вы можете попробовать эту библиотеку в 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/

0 голосов
/ 11 октября 2018

Почему бы не создать компонент обертки без рендеринга с вашим собственным ванильным 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.Вы можете обернуть свою таблицу пользовательским компонентом без рендеринга и погрузиться глубже в компонент слота, используя this.$el и document.querySelector.

...