如何在VueJS中使用ref()函数创建可动态增行的二维数组？

要维护一个响应式二维数组并通过点击按钮添加行，你只需要在addrow函数中向数组push一个新的子数组即可，以下是完整实现：

完整代码示例 #

<script setup>
import { ref } from 'vue'

// 初始化响应式二维数组，可按需添加初始行
const tab = ref([])

// 点击添加行的函数
function addrow() {
  // 向第一维度添加一行空的子数组，也可自定义默认列值
  tab.value.push([])
  // 若需要每行默认带固定列值，比如2列空字符串：
  // tab.value.push(['', ''])
}
</script>

<template>
  <button @click="addrow">添加一行</button>
  <!-- 可选：渲染二维数组的示例 -->
  <div v-for="(row, idx) in tab" :key="idx">
    <span v-for="(col, colIdx) in row" :key="colIdx">{{ col }} </span>
  </div>
</template>

关键说明 #

• 二维数组的第一维度对应行，每个元素本身是一个子数组（代表该行的列数据）
• 调用tab.value.push([])即可新增一行空行，若需要预设列数据，直接传入对应长度的子数组即可
• 由于使用了Vue的ref，数组变化会自动触发视图更新

内容的提问来源于stack exchange，提问作者BradleyKANA