vue基于element-ui table做行内编辑

最新推荐文章于 2026-04-24 09:35:44 发布

原创

最新推荐文章于 2026-04-24 09:35:44 发布 · 3k 阅读

标签

#vue

收录于

在Vue项目中，使用Element-UI的table组件进行行内编辑时遇到问题：点击编辑按钮，输入框未即时切换。经研究，原因是Vue的响应式系统未能正确追踪对象数组的属性变化。解决方案是为数组内的对象添加一个显示隐藏的属性，并确保对对象属性的赋值操作是响应式的。参照Vue官方文档，通过添加编辑状态来实现行内编辑功能，例如在列表中新增对象并设置其为编辑状态。

在做行内编辑的时候，直接对对象数组的属性赋值发现没有做响应式的
现象：点击编辑的时候，没有切换输入框。f12后，输入框才切换出来

vue文档说明： https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

代码如下

 <template>
    <el-table :data="labelList" style="width: 100%" border stripe>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" align="center">
            <template slot-scope="scope">
                <el-input placeholder="名称" size="small" v-show="scope.row.show" v-model="scope.row.name"></el-input>
                <span v-show="!scope.row.show">{
  
  {scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column l