如何使用 typescript、Vuetify 在 VUE js 中创建 v-table？

Question

我有一些日志数据，我必须从脚本部分构造一个v表。 我在将 html 标签附加到 v 表时遇到问题。

这是我尝试过的代码

<template>
  <div>
    <v-table width="800" ref="LogTable">
    </v-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onMounted } from 'vue'

const logRefData = ref("03/22 08:51:06 INFO  creating mailslot for RSVP" + "\n" +
  "2024-05-07 08:51:06 INFO:  mailbox allocated for rsvp" + "\n" +
  "2024-05-07 08:51:06 INFO: creating mailslot for RSVP via UDP" + "\n" +
  "2024-05-07 08:51:06 INFO:   mailbox allocated for rsvp - udp" + "\n" +
  "2024-05-07 08:51:06 TRACE:   entity for rsvp allocated and initialized" + "\n" +
  "2024-05-07 08:51:06 INFO:   creating socket for querying route" + "\n" +
  "2024-05-07 08:51:06 INFO:   no mailbox necessary for forward" + "\n" +
  "2024-05-07 08:51:06 INFO:   creating mailslot for route engine" + "\n" +
  "2024-05-07 08:51:06 TRACE:   ready to accept informational socket connection." + "\n" +
  "2024-05-07 08:52: 50 EVENT:   api request SENDER")

const logRefDataArray = ref(logRefData.value.split(/\r?\n/).filter(item => item));
console.log(logRefDataArray);

const LogTable = ref();

const renderLogTable = () => {
  console.log('Render data');
  const parentCont = LogTable;
  if (logRefDataArray.value.length) {
    parentCont.value.innerHTML = ``;
    for (const [i, log] of logRefDataArray.value.entries()) {
      const tr = document.createElement("tr");
      const td = document.createElement("td");
      const logStamp = log.substring(0, log.indexOf(': ') + 1).split(' ');
      console.log(logStamp)
      let logStampData = '';
      if (logStamp.length) {
        const date = logStamp.splice(0, 1);
        const time = logStamp.splice(0, 1);
        const logType = logStamp.join(' ');
        logStampData = `<span>${i + 1}.</span><i>${date} ${time}</i> <b>${logType}</b> `;
      }
      const logMessage = log.substring(log.indexOf(': ') + 1);
      const logToPrint = `${logStampData}${logMessage}`;
      td.innerHTML = `${logToPrint}`;
      tr.appendChild(td);
      parentCont.value.appendChild(tr);
    }
  } else {
    parentCont.value.innerHTML = `<tr><td class="no_entry_found">No logs found</td></tr>`;
  }
}




onMounted(() => {
  renderLogTable();
});


</script>

当我使用“document.getElementByID”时，我能够成功获取表格数据。但我想要更多的 vue js、typescript，而不是纯 HTML/JS。所以我使用 ref 更改了代码。

我收到错误“TypeError：parentCont.value.appendChild 不是函数”。我该如何解决这个错误？有没有更好的方法来做到这一点？我们如何在这里使用 v-html ？

Answer 1

这不是使用 vue 的方式，你应该避免以这种方式操纵厄运。我认为你已经开始实现 vue，但不清楚它是如何工作的，我建议你阅读官方文档 https://vuejs.org/guide/essentials/list.html 以及 vuetify https://vuetifyjs .com/en/components/tables/

我建议您将数据解析为 JSON 并使用 v-for 逐步执行 您应该以类似以下内容结束：

<v-table>
  <thead>
    <tr>
      <th>Your header</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="log in yourData">
      <td>{{ log }}</td>
    </tr>
  </tbody>
</v-table>