vue使用el-table在el-table-column下使用v-if改变数据不响应

vue使用el-table在el-table-column下使用v-if改变数据不响应

代码:

 <el-table :data="propertyList"
              class="hoo-clear-table"
              height="100%"
              ref="tableRef"
              style="width: 100%">
     
      <el-table-column align="left"
                       :label="$t('overview.remark')">
        <template>
          <div class="remark-wrap">
            <div v-if="!editActive">币币号</div>
            <el-input type="text"
                      v-else></el-input>
            <svg aria-hidden="true"
                 @click.stop="changeEditActive"
                 class="edit-icon pointer">
              <use href="#icon-edit"></use>
            </svg>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status"
                       align="center"
                       :label="$t('overview.status')">
      </el-table-column>
      
    </el-table> 

如上面代码改变editActive的值不响应

解决方案

需要在对应列加上key属性即可

<el-table :data="propertyList"
              class="hoo-clear-table"
              height="100%"
              ref="tableRef"
              style="width: 100%">
     
      <el-table-column align="left"
      ：key="Math.random()"
                       :label="$t('overview.remark')">
        <template>
          <div class="remark-wrap">
            <div v-if="!editActive">币币号</div>
            <el-input type="text"
                      v-else></el-input>
            <svg aria-hidden="true"
                 @click.stop="changeEditActive"
                 class="edit-icon pointer">
              <use href="#icon-edit"></use>
            </svg>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status"
                       align="center"
                       :label="$t('overview.status')">
      </el-table-column>
      
    </el-table> 

如果对你有帮助，请作者喝杯咖啡