Показать HTML-код для динамически создаваемой таблицы


Показать HTML-код для динамически создаваемой таблицы

25.11.2020 05:34:23 Просмотров 51 Источник

есть ли способ получить html-код, который генерируется при динамическом создании таблицы с помощью циклов v-for в vue?

<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>

Например, если бы я ввел 3 для переменной NumOfCLO, 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>

javascript html vue.js
У вопроса есть решение - Посмотреть?

Ответы - Показать HTML-код для динамически создаваемой таблицы / Show HTML Code for dynamically created table

Является ответом!
Yom S.

25.11.2020 06:48:58

Да (вроде того), вы можете назначить элемент таблицы ref и получить его outerHTML. Однако обратите внимание, что,

..о сроках регистрации ref: поскольку сами ref создаются в результате функции рендеринга, вы не можете получить к ним доступ при первоначальном рендеринге - они еще не существуют! $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>

Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X