vue - 将行和列插入到具有范围 css 的表中答案

【问题标题】：vue - inserting rows and columns into a table with scoped cssvue - 将行和列插入到具有范围 css 的表中
【发布时间】：2018-03-02 00:50:20
【问题描述】：

所以我尝试使用下面的代码将行和列插入到表中：

add_to_table(type) {
  switch (type) {
    case "row":
      let columns = this.$refs.table.rows[0].cells.length;
      let row = this.$refs.table.insertRow(-1);
      row.height = "20px";
      for (let i = 0; i < columns; i++) {
        let cell = row.insertCell(-1);
        cell.innerHTML = "&nbsp;";
      }
      break;
    case "column":
      for (let row of this.$refs.table.rows) {
        let cell = row.insertCell(-1);
        cell.innerHTML = "&nbsp;";
      }
      break;
  }
}

但是，这似乎并没有维护 css（没有向其中添加 data-* 东西）。

我目前正在使用v-for 解决这个问题：

<tr v-for="row in rows">    
    <td v-for="column in columns">
    </td>    
</tr>

https://codesandbox.io/s/8n728r5wr8

【问题讨论】：

你为什么要操纵 DOM（.innerHTML 等）？ v-for 解决方案是可行的方法。
@acdcjunior 可能希望将单元格添加到单个行。这仅允许相等的行和列。也不知道怎么做colSpan之类的东西。
我不知道你的意思，但是使用 Vue 可以更简单地完成。
@acdcjunior 这就是我问的原因。我正在申请 colSpan rowSpan 以及其他可能导致单元格不等的事情。
您能否向我们展示数据（您计划迭代），以便我们可以使用 Vue 试一试？我知道操作 DOM 似乎更简单，但我保证使用 Vue 的最终结果会更好。

标签： html vue.js html-table vuejs2

【解决方案1】：

您创建的行和列未设置样式，因为您声明的 <style> 是 scoped。

要获得作用域样式的元素，它们必须具有data-v-SOMETHING 属性。您手动创建的元素，而不是通过 Vue，没有该属性。

警告：Vue 是数据驱动的，正确、简单、更可预测实现您想要的和可维护的方法是改变data 属性并让 Vue 的模板对它做出相应的反应（使用 v-for 之类的指令）。您的解决方案不是最优的。您已收到警告。

话虽如此，你有一些选择：

在scoped 旁边声明一个额外的<style>（非scoped）标签。创建的元素将采用这些样式。 缺点：样式将是全局的。 优点：你不依赖 Vue 内部，你不必总是添加 data-v 属性（见下文）。

例子：
```
<style scoped>
...
</style>
<style>
/* EXAMPLE OF GLOBAL STYLE ALONGSIDE A SCOPED ONE */
tr, td {
  box-shadow:inset 0px 0px 0px 1px orange;
}
</style>
```
获取data-v-SOMETHING 属性。可在this.$options._scopeId 获得。 双重警告：前缀_ 表示它是internal code。它可能会更改，恕不另行通知。您的应用程序可能永远停留在当前的 Vue 2.x 版本中。你又被警告了。

因此，每当您创建元素时，只需添加属性即可。示例：
```
// row example
let row = this.$refs.table.insertRow(-1);
row.setAttribute(this.$options._scopeId, ""); // <== this adds the data-v-XYZ attr
...
// cell example
let cell = row.insertCell(-1);
cell.setAttribute(this.$options._scopeId, ""); // <== this adds the data-v-XYZ attr
```

Here's a CodeSandbox demo 包含两种选择的示例。

【讨论】：