亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

顯示動態創建表格的 HTML 代碼

顯示動態創建表格的 HTML 代碼

四季花海 2023-06-15 16:52:40
有沒有辦法檢索在 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/[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>


查看完整回答
反對 回復 2023-06-15
  • 1 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號