Question

    <el-tab-pane
      v-for="(item, index) in systemOptionsHeaderList"
      :key="index"
      :name="item.value"
      :lazy="true"
    >
      <span
        slot="label"
      >
        {{item.label}}
        <tips
          v-if="formHasModify"
          content="本页数据暂未保存"
        />
      </span>
    </el-tab-pane>


// The systemOptionsHeaderList: 

systemOptionsHeaderList: 
  [{
    label: '拨打策略',
    value: '1'
  }, {
    label: '资源设置',
    value: '2'
  }, {
    label: '打断设置',
    value: '3'
  }, {
    label: '静默设置',
    value: '4'
  }, {
    label: '分句设置',
    value: '5'
  }]

我使用Element-ui“ el-tab-pane”组件

现在，我要使用“ formHasModify”（布尔数据）来控制“提示” 组件显示或隐藏

但是，当我更改“ formHasModify”时，视图无法立即更新

Answer 1

我解决了这个问题：

  el-tab-pane
    ref="elTabs"   // lock the ref

//当数据更改时，强制更新组件

let childrenRefs = this.$refs.elTabs.$children
this.$nextTick(() => {
  childrenRefs.forEach(child => child.$forceUpdate())
})

Element-ui视图无法立即在插槽区域中更新

1 个答案: