element-ui + vue2.0 表格单元格编辑 v-if v-show 不能切换

Question

我想实现一个功能：编辑当前单元格，修改之后保存，并且显示非编辑状态
理想是这样子的：

我的代码：

<el-table-column
        label="实际预算"
        sortable
        width="120">
        <template scope="scope">
          <el-input v-show="scope.row.sellShow" v-model="scope.row.day_budget" icon="upload" :on-icon-click="saveIconClick" @keyup.enter.native="saveIconClick"></el-input>
          <span v-show="!scope.row.sellShow"><i class="el-icon-edit" @click="cellClick(scope.row)"></i>&nbsp;{{ scope.row.day_budget }}</span>
        </template>
</el-table-column>
/*略*/
export default {
    data() {
      return {
        /*显示状态*/
        //sellShow: false,之前设置的，但是一编辑所有列的都编辑了，很尴尬
        /*列表数据*/
        lists: [{ //这里是没有sellShow属性的
          day_budget:"30000"
        }],
      }，
    methods: {
      /*实际预算单元格编辑*/
      cellClick(row) {
        console.log(row.sellShow)
        row.sellShow = !row.sellShow;
      },
      /*实际预算单元格编辑（保存）*/
      saveIconClick() {
        console.log('save')
      }
    }  
}

现在的问题:点击icon会更改row.sellShow的值，但是并不能切换到input

Answer 1

简单点就是你的每行对应的 row.sellShow 并没有被vue做响应式管理。查看官方文档。

另外 如何更改。

 lists: [{ //这里是没有sellShow属性的
          day_budget:"30000",
          sellShow :false
        }],

深入响应式原理

Answer 2

你用的是table控件吧，而table使用了:data="tableData"来绑定数据
而要修改行的状态应该修改table对应的行，不然也会变成所有行进入编辑状态
问题应该是你要在每行中添加一个对应的属性去做处理，单个属性来操作的话你就不能把编辑放在行里，而是通过
@click="handleEdit(scope.$index, scope.row)"得到行和数据进行编辑。

Answer 3

把切换显示/隐藏的sellShow 属性置为 true

cellClick(row) {
   row.sellShow = true
}

Answer 4

你这种无法组件化啊，如果做成组件，表格内容是不确定的，用循环生成，那么你这种给没个row加一个状态点编辑整行都会进去编辑状态编辑，怎么做单元格可编辑的组件化

Answer 5

你好，我遇到了跟你一样的问题，请问你最后是如何解决了？可以分享一下吗？