动态绑定v-if失效

### Vue 中 `v-if` 导致动态绑定失效的原因

当使用 `v-if` 控制元素的显示与隐藏时，被控制的 DOM 元素会在条件为假时不渲染到页面中。这意味着每当条件改变重新渲染时，整个组件实例都会被销毁并重建[^1]。

对于表单控件来说，这种行为可能导致数据绑定出现问题，特别是像 `<el-select>` 这样的复杂组件，在首次加载时未满足显示条件的情况下不会创建其内部状态，从而使得后续操作无法正常工作[^2]。

### 解决方案一：改用 `v-show`

如果不需要完全移除DOM节点而是仅需控制可见性，则可以考虑将 `v-if` 替换为 `v-show`。这种方式下，无论初始状态下是否展示该元素，所有相关联的数据和事件监听器都将保持存在，进而避免因频繁创建/销毁带来的副作用。

<th v-for="(item, ind) in cateheader" :key="ind">
    {{ item.name }}
    <!-- 使用 v-show 而不是 v-if -->
    <el-select v-show="!status" multiple v-model="item.selected" @change="headerChange(ind,item)" placeholder="请选择">
        <el-option v-for="(it, indx) in item.drop.unitShow" :key="indx" :label="it.add.text" :value="it.add.value"></el-option>
    </el-select>
</th>

### 解决方案二：手动管理生命周期钩子

另一种方法是利用 Vue 的生命周期钩子来处理这种情况下的初始化逻辑。可以在每次 `v-if` 条件变为真之前执行必要的准备工作，比如重置选中的选项列表或触发特定的方法更新视图。

watch: {
    status(newVal){
        if (!newVal && this.cateheader.length > 0){
            // 当 !status 变成 true 后做些额外的操作
            this.$nextTick(() => {
                // 更新 select 组件的状态或其他任何需要做的事情
            });
        }
    }
}

### 解决方案三：延迟加载策略

还可以采用懒加载的方式，即只有在第一次真正需要用到这些组件的时候才去获取它们的内容。这可以通过设置一个标志位变量配合 `v-if` 实现，确保只在必要时刻才会触发展示逻辑。

<!-- 添加 loaded 属性用于标记是否已经加载过一次 -->
<template v-if="loaded && !status">
    ...
</template>

<script>
data() {
    return {
        loaded: false,
        ...
    };
},
methods:{
    handleStatusChange(){
        if(!this.status){
            this.loaded = true;
        }else{
            this.loaded = false;
        }
    }
}
</script>