解决ElementUI动态编辑标签点击一个其他行的标签也展开的问题

解决ElementUI动态编辑标签点击一个其他行的标签也展开的问题

我们发现在点击某一个New Tag 按钮的时候，所有行的New Tag都展开了，这是因为我们绑定的属性有问题。

<template slot-scope="scope">
<el-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button 
v-else 
size="small" 
@click="inputVisible=true">
+ New Tag
</el-button>
</template>

因为inputVisible是全局的属性，所以点击的时候inputVisible，所有行的inputVisible都会改为true，如何解决呢？

我么需要在渲染数据的时候做一些处理，在每一行的数据中都加一个inputVisible属性，默认为false，点击的时候改变这一行的inputVisible属性即可。

data.forEach(item => {
          item.inputVisible = false
          item.inputValue = ''
        }
        /*data为后台获取的数组类型的数据，为数组的每一个对象都添加一个inputVisible 和inputValue 属性并附上初始值*/

同时修改template中的属性绑定

<template slot-scope="scope">
<el-input
  class="input-new-tag"
  v-if="scope.row.inputVisible"
  v-model="scope.row.inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button 
v-else 
size="small" 
@click="scope.row.inputVisible=true">
+ New Tag
</el-button>
</template>

这样就完美解决了问题，以后遇见类似的问题，只需在每行数据添加一个私有数据就可以解决啦。