Vue2+Element UI动态v-model问题：字符串转数组及新增功能异常

1. 先解决数据响应式问题（v-model不生效核心原因） #

原数据是字符串格式的categoryV3，无法直接绑定数组输入框，必须先将其转换为响应式数组，并在每行数据中维护这个数组字段：

// 接口获取表格数据后，预处理每行数据
this.tableData = res.data.map(item => ({
  ...item,
  // 把逗号分隔的字符串转成数组，空值处理为空数组
  categoryV3List: item.categoryV3 ? item.categoryV3.split(',') : []
}))

注意：如果后续动态给行数据添加categoryV3List字段，必须用this.$set(row, 'categoryV3List', [])确保Vue2能监听该属性的响应式变化。

2. 表格列模板实现（新增/删除UI） #

利用Element UI表格的作用域插槽，渲染输入框和操作按钮，直接绑定到行数据的数组字段：

<el-table-column label="分类V3" prop="categoryV3">
  <template slot-scope="scope">
    <div class="category-group">
      <!-- 遍历数组渲染输入项 -->
      <div v-for="(item, idx) in scope.row.categoryV3List" :key="idx" class="category-item">
        <el-input v-model="scope.row.categoryV3List[idx]" size="small" placeholder="输入分类"></el-input>
        <el-button icon="el-icon-delete" size="mini" @click="removeItem(scope.row, idx)"></el-button>
      </div>
      <!-- 新增按钮 -->
      <el-button icon="el-icon-plus" size="mini" type="primary" @click="addItem(scope.row)">新增分类</el-button>
    </div>
  </template>
</el-table-column>

3. 新增/删除逻辑实现 #

直接操作行数据的数组字段即可，Vue2会自动触发视图更新：

methods: {
  // 新增空输入项
  addItem(row) {
    row.categoryV3List.push('')
  },
  // 删除指定索引的项
  removeItem(row, idx) {
    row.categoryV3List.splice(idx, 1)
  }
}

4. 提交数据时反向转换 #

提交接口前，把数组重新转回逗号分隔的字符串：

// 预处理提交数据
const submitData = this.tableData.map(item => ({
  ...item,
  categoryV3: item.categoryV3List.join(',')
}))
// 调用接口提交submitData

5. 辅助样式（可选） #

让布局更合理：

.category-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.category-item {
  display: flex;
  gap: 4px;
  align-items: center;
}
.category-item .el-input {
  width: 220px;
}

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