element 问题集锦

el-tooltip与el-input组合在el-dialog中使用,如果修改el-tooltip的content,会导致el-input的双向绑定失效

以下是例子源码

<div class="dvContainer">
            <el-tooltip
              v-if="data.UserCode && !data.UserCode.length < 1"
              class="item"
              effect="dark"
              :content="data.UserCode"
              placement="top"
            >
              <el-input v-model="data.UserCode" style="width: 68%">                
              </el-input>
            </el-tooltip>
            <el-input v-else v-model="data.UserCode" style="width: 68%">              
            </el-input>
</div>

export default {
  components: { InvDetail, SelectAccount },
  data() {
    return {
      data:{
        UserCode:"",
      }
    };
  },
  created() {
  },
  beforeDestroy() {},
  methods: {},    
};

描述:

场景:应PM要求,当data中UserCode为空时,el-tooltip不要出现,不为空的时候,el-tooltip可以把值显示出来.所以有了v-if和v-else的处理

因为数据源是会变化的,所以当UserCode有值的时候,vue的双向绑定会被el-tooltip给挡掉,此重现步骤是,打开页面后,给对应的字段写入值,然后关闭在重新打开,不要刷新页面

官方的disabled属性是无效的,至少我的场景中是无效的