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

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包含两种替代品的例子。