html - 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 创建的元素没有该属性。

WARNING: Vue is data-driven, the correct, simplest, more predictable and maintainable way of achieving what you want is mutating a data attribute and letting Vue's templates react to it accordingly (using directives like v-for). Your solution is not optimal. You have been warned.

话虽如此，您有一些选择:

• 声明额外的 <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包含两种选择的示例。