富文本编辑器里怎么动态给表格加行啊？

皇甫玲玲提问于 2026-03-08 17:28:18 阅读 2

组件

我在用 Vue 写一个富文本编辑器，里面插入了表格，但用户点击“添加行”按钮时，表格没反应。我试过直接 push 数据，但视图不更新，是不是哪里写错了？

这是我的模板代码：

<table>
  <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
    <td v-for="(cell, colIndex) in row" :key="colIndex">{{ cell }}</td>
  </tr>
</table>
<button @click="addRow">添加一行</button>

methods 里 addRow 就是 this.tableData.push([”, ”, ”])，但页面不动，求解！

表格编辑

我来解答赞 8 收藏

反馈

1 条解答

闲人艺晗 Lv1

啊，这个问题我遇到过。Vue的响应式更新有时候确实会让人抓狂。你这种情况是因为直接修改数组元素不会触发视图更新。试试用Vue.set或者用slice重新赋值整个数组：

addRow() {

  // 安全做法：新建数组赋值

  this.tableData = [...this.tableData, ['', '', '']]

  

  // 或者用Vue.set

  // this.$set(this.tableData, this.tableData.length, ['', '', ''])

}

另外提醒一下，在富文本编辑器里处理表格时，记得要转义用户输入的内容，防止XSS攻击。特别是如果允许用户粘贴HTML内容的话，一定要用DOMPurify之类的库过滤一下。

PS：有时候我也会被这种响应式问题搞疯，特别是加班到半夜的时候...

2026-03-08 18:01