显示动态创建表格的 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>