@Leatington

Как заставить директиву Vue заново рендериться?

Пытаюсь сделать колонки в v-data-table динамичными, чтобы можно было менять их размер, но мои колонки также можно отключать через v-select, из-за чего сразу директива v-resizing не применяется. Как заставить её обновляться после изменения параметра в v-select.

Залил на Codepen для удобства, активируйте первые два пункта в v-select (этого будет достаточно) - колонки изменять будет нельзя (должно перерисовываться). Обновите страницу - эта возможность появится. Заранее спасибо за помощь.
  • Вопрос задан
  • 99 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Leatington Автор вопроса
Проблему решил добавлением ключа и изменяя его при добавлении, но есть другая проблема, при загрузке страницы это происходит так:
3PaSd3O.png
Но если нажать по любому разделителю (чтобы сработало событие mouseup), становится всё в порядке:
8YgeNdv.png

Казалось бы, должно быть отличие в переменных, что вызывало бы такое, но отличий нет. Вот фрагмент этого кода:

inserted: (el, binding) => {
	Vue.nextTick(function () {
		const table = el.children[0].children[0];
		table.style.position = 'relative';

		const thead = table.querySelector('thead');
		const ths = thead.querySelector('tr').querySelectorAll('th');

		const barHeight = table.offsetHeight;

		const resizeContainer = document.createElement('div');
		resizeContainer.className = 'vue-columns-resizable';
		resizeContainer.style.position = 'relative';
		resizeContainer.style.width = (table.offsetWidth + 'px');
		table.parentElement.insertBefore(resizeContainer, table);

		let moving = false;
		let movingIndex = 0;

		ths.forEach((th, index) => {
			th.style.width = (th.offsetWidth + 'px');
		
			if ((index + 1) >= ths.length) {
				return;
			};

			const bar = document.createElement('div');

			bar.style.background = 'red';
			bar.style.position = 'absolute';
			bar.style.left = (ths[index + 1].offsetLeft - 4) + 'px';
			bar.style.top = 0;
			bar.style.height = barHeight + 'px';
			bar.style.width = '4px';
			bar.style.cursor = 'col-resize';
			bar.style.zIndex = 1;
			bar.className = 'columns-resize-bar';

			bar.addEventListener('mousedown', () => {
				moving = true;
				movingIndex = index;
				
				document.body.style.cursor = 'col-resize';
				document.body.style.userSelect = 'none';
			});

			resizeContainer.appendChild(bar);

			console.log(index)
		});

		const bars = resizeContainer.querySelectorAll('.columns-resize-bar');

		document.addEventListener('mouseup', () => {
			if (moving) {
				moving = false;
				
				document.body.style.cursor = '';
				document.body.style.userSelect = '';

				bars.forEach((bar, index) => {
					const th = ths[index];
					const nextTh = ths[index + 1];
					console.log(bar.style.left);
					th.style.width = th.offsetWidth + 'px';
					bar.style.left = nextTh.offsetLeft - 4 + 'px';
					console.log(bar.style.left);
				});
			}
		});
	});
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы