有没有办法检索在 vue 中使用 v-for 循环动态创建表时生成的 html 代码。<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>例如，如果我为 NumOfCLO 变量输入 3，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>
1 回答
森栏
TA贡献1810条经验 获得超5个赞
是的（有点），您可以将表元素分配给 aref并检索它的outerHTML. 但请注意，
...关于 ref 注册时间：因为 refs 本身是作为渲染函数的结果创建的，所以您无法在初始渲染时访问它们 - 它们还不存在！
$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>
添加回答
举报
0/150
提交
取消