可调整大小的 Vue-good-table 或 Vue

Question

我在Vue.js中有一个带有Vue-good-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

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

Answer 2

为什么不使用自己的原版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 = " ";
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更深入地了解其插槽组件。

Answer 3

您可以在原版中尝试此库 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/