Vue输入框/选择框新增状态可编辑，修改状态不可编辑_vue 单选框不可编辑

新增和编辑同页面，新增没有传参，修改状态不可编辑。

在这里我用选择框举例。

思路：

在新增/修改页，先判断是哪种状态，再根据状态不同，选择是否禁用某个选择框。

判断是否有传参，有传参即为修改状态；没有传参即为新增状态。

如下：修改状态有传参，新增状态没有传参。

  //新增      
saveCustInfo() {
            this.$router.push('/mag/informatonAdd')
        },  
//修改
toEdit(val) {
            this.$router.push({ name: 'informatonAdd', query: { oppId: val.oppCode } })
        },

接下来我们去新增页里面做判断。

假设这个输入框，需要根据是否是编辑模式来设置是否可编辑：

    <el-form-item label="状态：" prop="oppStatus">  
      <el-select v-model="formData.oppStatus" placeholder="请选择状态" clearable :disabled="!isNewRecord">  
        <el-option v-for="(item, index) in dict.StatusEnum" :key="item.code" :label="item.mark" :value="item.code"></el-option>  
      </el-select>  
    </el-form-item> 

<script>  
export default {  
  data() {  
    return {  
      formData: {  
        Status: '', // 假设这是状态的值  
        // ... 其他表单字段  
      },  
      dict: {  
        StatusEnum: [  
          // 假设这是状态的枚举列表  
          { code: 'status1', mark: '状态1' },  
          { code: 'status2', mark: '状态2' },  
          // ... 其他状态  
        ],  
      },  
      isNewRecord: true, // 默认为新增模式  
    };  
  },  
  created() {  
    // 在这里，你可能需要根据路由参数来设置isNewRecord的值  
    // 例如，你可以调用一个方法来检查路由参数  
    this.checkEditMode();  
  },  
  methods: {  
    checkEditMode() {  
      // 检查路由参数中是否包含oppId  
      if (this.$route.query.oppId) {  
        this.isNewRecord = false; // 设置为编辑模式  
      } else {  
        this.isNewRecord = true; // 设置为新增模式  
      }  
    },  
    // 其他的方法...  
  },  
  watch: {  
    // 监听路由变化，重新检查编辑模式  
    '$route.query.oppId': 'checkEditMode',  
  },  
};  
</script>

在上面的代码中，<el-select>组件的:disabled属性被绑定到了!isNewRecord。这意味着当isNewRecord为true时（即新增模式），!isNewRecord为false，选择框是启用的；而当isNewRecord为false时（即编辑模式），!isNewRecord为true，选择框被禁用。

同时，我们在created生命周期钩子中调用了checkEditMode方法来根据路由参数设置isNewRecord的值，并且在watch中监听路由参数的变化来重新检查编辑模式。这样，无论页面是如何被访问的（直接访问或通过路由跳转），isNewRecord的值都会被正确设置，从而控制选择框的可编辑状态。