【VUE】父子组件联动实现动态样式控制
相关组件:
父组件:src/views/erp/contract/Form.vue
子组件:src/views/erp/contract/modules/PlanTable.vue
实现思路:
1.根据已有的isEdit
判断状态是不是编辑或者新增,将状态传递给子组件
2.子组件根据状态来决定是否添加星号样式
具体方法:
1.将原来的固定样式,改为动态样式
{
title: "计划金额",
dataIndex: "amount",
// class: "form-table-col--required",
className: "", // 初始为空字符串
scopedSlots: { customRender: "amount" }
},
2.编写方法,控制样式
updateColumnClasses: function () {
console.log("xrilang", this.isShowStar);
const requiredColumns = ["amount", "plannedDate", "condition"];
this.paymentPlanColumns.forEach(column => {
if (requiredColumns.includes(column.dataIndex)) {
column.className = this.isShowStar ? "form-table-col--required" : "";
}
});
}
由于该方法需要父组件传来的数据进行判断,因此进入第三步:
3 获取父组件传来的数据
props: {
isShowStar: {
type: Boolean,
default: false
}
},
4 调用方法
(1)mounted
mounted () {
this.setActionColumn();
this.updateColumnClasses();
},
(2)activated
activated () {
this.setActionColumn();
this.updateColumnClasses(); // 组件激活时也需更新
},
(3)watch
watch: {
isPurchase: function (val) {
this.inputTitle = val ? "付款计划" : "收款计划";
this.paymentPlanColumns.some(v => {
if (v.dataIndex === "condition") {
v.title = this.inputTitle;
return true;
}
});
this.updateColumnClasses(); // 更新必填项样式
},
action: function () {
this.updateColumnClasses(); // 当action改变时更新必填项样式
}
5 父组件传值
<PlanTable :action="$route.params.action" :is-purchase="isPurchaseContract" :model="model" :contract-amount="model.amount" @clearValidate="handleClearValidate" :is-show-star="!!isEdit" />
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
2024-01-14 【前端】2024年 前端Base64编码的中文处理问题
2024-01-14 【Vue】前端直接显示MySQL Datatime时间,显示为英文如何处理