📂前端
🔖前端
2025-01-14 15:09阅读: 4评论: 0推荐: 0

【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" />
posted @   萌狼蓝天  阅读(4)  评论(0编辑  收藏  举报
历史上的今天:
2024-01-14 【前端】2024年 前端Base64编码的中文处理问题
2024-01-14 【Vue】前端直接显示MySQL Datatime时间,显示为英文如何处理
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
展开