Question

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

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

Answer 1

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

要获取范围样式的元素，它们必须具有data-v-SOMETHING属性。您手动创建的元素（而不是通过Vue）没有该属性。

警告：Vue是数据驱动的，正确，最简单，更可预测实现你想要的东西的可维持方式是改变data 属性并让Vue的模板相应地对它作出反应（使用像v-for）这样的指令。您的解决方案并非最佳。你被警告了。

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

在<style>之前声明另一个scoped（非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包含两种替代方案的示例。

vue - 将行和列插入带有作用域的css的表中

1 个答案: