Показать HTML-код для динамически создаваемой таблицы
есть ли способ получить html-код, который генерируется при динамическом создании таблицы с помощью циклов v-for в vue?
<table>
<tr>
<th colspan="99">row 1</th>
</tr>
<tr>
<th rowspan="2">row 2</th>
<th colspan="99">row 2</th>
</tr>
<tr>
<td v-for="index in numOfCLO" v-bind:key="index">{{index}}</td>
</tr>
<tr v-for="index in numOfMod" v-bind:key="index">
<td >row 3 {{index}}</td>
<td v-for="index in numOfCLO" v-bind:key="index"></td>
</tr>
</table>
Например, если бы я ввел 3 для переменной NumOfCLO, html-код был бы примерно таким
<tr>
<td>{{index}}</td>
<td>{{index}}</td>
<td>{{index}}</td>
</tr>
вместо
<tr>
<td v-for="index in numOfCLO" v-bind:key="index">{{index}}</td>
</tr>
Ответы - Показать HTML-код для динамически создаваемой таблицы / Show HTML Code for dynamically created table

25.11.2020 06:48:58
Да (вроде того), вы можете назначить элемент таблицы ref
и получить его outerHTML
. Однако обратите внимание, что,
..о сроках регистрации ref: поскольку сами ref создаются в результате функции рендеринга, вы не можете получить к ним доступ при первоначальном рендеринге - они еще не существуют!
$refs
также не реагирует, поэтому вы не должны пытаться использовать его в шаблонах для привязки данных.
Поэтому, если вам каким-то образом нужно, чтобы он реагировал на входные изменения (например, делал "живой" предварительный просмотр), вы можете либо сгенерировать HTML по требованию (с помощью нажатия кнопки, как в следующем примере), либо watch
ввести входные данные формы для изменений и (повторно)сгенерировать.
(В этом примере используется HTML-форматер с именем js-beautify
. Пожалуйста, удалите его, если он вам не нужен)
new Vue({
el: '#app',
data: () => ({
numOfCLO: 3,
numOfMod: 5,
generatedHtml: ''
}),
mounted() {
this.generate();
},
methods: {
generate() {
this.generatedHtml = html_beautify(this.$refs.table.outerHTML);
}
}
})
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid;
}
.container {
display: flex;
}
.container input {
width: 40px;
}
.container > * {
margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-html.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<div class="container">
<input v-model.number="numOfCLO" type="number" placeholder="number of CLO" />
<input v-model.number="numOfMod" type="number" placeholder="number of Mod" />
<button @click="generate">Generate HTML</button>
</div>
<div class="container">
<table ref="table">
<tr>
<th colspan="99">row 1</th>
</tr>
<tr>
<th rowspan="2">row 2</th>
<th colspan="99">row 2</th>
</tr>
<tr>
<td v-for="index in numOfCLO" v-bind:key="index">{{index}}</td>
</tr>
<tr v-for="index in numOfMod" v-bind:key="index">
<td>row 3 {{index}}</td>
<td v-for="index in numOfCLO" v-bind:key="index"></td>
</tr>
</table>
<textarea cols="40" rows="10">{{generatedHtml}}</textarea>
</div>
</div>