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

宁顾取。

已于 2024-04-09 18:33:59 修改

阅读量1.2k

点赞数 4

分类专栏：前端一小步文章标签： vue.js javascript 前端

于 2024-04-09 18:33:23 首次发布

本文链接：https://blog.csdn.net/weixin_54446335/article/details/137562600

版权

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

在这里我用选择框举例。

思路：

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

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

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

  //新增      
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" :lab