如何实现行内编辑

el-table的行内编辑

这个比较简单，我先放代码后续再讲解哈~

      <el-table :data="list">
        <!-- 放置列 -->
        <el-table-column align="center" width="200" label="角色">
          <template v-slot="{row}">
            <el-input
              v-if="row.isEdit"
              v-model="row.editRow.name"
            />
            <span v-else>{{ row.name }}</span>
          </template>
        </el-table-column>
      </el-table>

我这边使用的是：使用v-if 和 v-else + 自定义的一个编辑状态

逻辑是：点击编辑时，v-if判断一下是否为编辑状态，编辑状态下显示文本框。不是编辑则显示内容即可

需要注意的是：接口获取的数据是没有编辑的状态值的

我是在获取到后端接口的返回值后，使用$set绑定了一下 响应式 的状态
直接通过forEach添加的数据是有问题的，需要使用$set添加

  this.list.forEach(item => {
        this.$set(item, 'isEdit', false)
     }

$Set

Vue.$set(target,key,value)
/*
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据(可以是字符串和数字)
value ：重新赋的值
*/

总结：通过添加的isEdit值判断是否是编辑状态，然后显示相应的内容即可