显示动态创建表格的 HTML 代码

Question

有没有办法检索在 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>

Answer 1

是的（有点），您可以将表元素分配给 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>