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/[email protected]/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>
添加回答
舉報