你遇到的问题是在使用 Vue 和 Element UI 时，`el-tooltip` 的 `content` 属性与 `el-input` 的双向数据绑定在某些条件下出现了冲突。这个问题的核心是当你试图动态更改 `el-tooltip` 的 `content` 属性时，它与内部的 `el-input` 之间的数据绑定出现了混乱。以下是可能的解决方案：
### 问题分析：
在你的代码中，`el-tooltip` 的 `content` 属性绑定到 `data.UserCode` 上，而 `el-input` 也使用 `v-model` 绑定到 `data.UserCode` 上。当 `data.UserCode` 变化时，两者都会受到影响。由于 `el-tooltip` 的显示和隐藏是基于 `data.UserCode` 的值来控制的（通过 `v-if`），所以它的显示和隐藏可能会导致 `el-input` 的数据状态不稳定。
### 解决方案：
#### 方法一：使用计算属性（Computed Properties）
你可以使用计算属性来分离 `el-tooltip` 和 `el-input` 的数据绑定。这样即使 `data.UserCode` 发生变化，也不会直接影响 `el-tooltip` 的显示内容。例如：
```vue
computed: {
tooltipContent() {
return this.data.UserCode; // 返回用于 tooltip 的内容
}
}
```
然后在模板中使用这个计算属性：
```html
<el-tooltip :content="tooltipContent" ...>
...
</el-tooltip>
```
#### 方法二：使用事件监听控制 Tooltip 的显示与隐藏状态
当你想控制 tooltip 的显示和隐藏而不直接使用数据属性时，你可以通过 Vue 的事件监听来控制 tooltip 的显示状态。例如，你可以监听输入框的变化事件来控制 tooltip 的显示与隐藏，而不依赖于其内部值来设置显示内容。这样做可以保持输入字段的状态不被其他组件干扰。例如：
在模板中添加一个 `@input` 事件监听器来切换 tooltip 的显示状态，并绑定真正的输入值到 input 组件上。这样可以避免由于直接修改 tooltip content 而导致的双向数据绑定问题。具体实现细节需要根据你的业务逻辑来定制。这样可以使数据和组件状态更加分离，减少潜在的冲突。
