营销型外贸网站建设公司,青海建设厅网站尚少岩,工业互联网龙头公司排名,最好的cms开源新增和编辑同页面#xff0c;新增没有传参#xff0c;修改状态不可编辑。
在这里我用选择框举例。 思路#xff1a;
在新增/修改页#xff0c;先判断是哪种状态#xff0c;再根据状态不同#xff0c;选择是否禁用某个选择框。
判断是否有传参#xff0c;有传参即为修…新增和编辑同页面新增没有传参修改状态不可编辑。
在这里我用选择框举例。 思路
在新增/修改页先判断是哪种状态再根据状态不同选择是否禁用某个选择框。
判断是否有传参有传参即为修改状态没有传参即为新增状态。
如下修改状态有传参新增状态没有传参。 //新增
saveCustInfo() {this.$router.push(/mag/informatonAdd)},
//修改
toEdit(val) {this.$router.push({ name: informatonAdd, query: { oppId: val.oppCode } })},
接下来我们去新增页里面做判断。 假设这个输入框需要根据是否是编辑模式来设置是否可编辑 el-form-item label状态 propoppStatus el-select v-modelformData.oppStatus placeholder请选择状态 clearable :disabled!isNewRecord el-option v-for(item, index) in dict.StatusEnum :keyitem.code :labelitem.mark :valueitem.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的值都会被正确设置从而控制选择框的可编辑状态。
