【VUE】页面跳转实现动态样式控制

【VUE】父子组件联动实现动态样式控制

---

跳转得到的参数大概有这些：

    handleToPage: function (action, id, key = "form", queryParam = {}) {
      this.$router.push({
        path: `${this.routeKey}/${key}/${action}${id ? "/" + id : ""}`,
        query: queryParam
      });
    }

首先要接收用得上的参数

  mounted () {
    const action = this.$route.params.action;
    this.isShowStar = action === "add" || action === "edit";
    this.updateColumnClasses();
  },

编写对应的方法

 updateColumnClasses: function () {
      // 指定需要添加样式的列
      const requiredColumns = [影响的列];
      // 函数：更新指定列数组中的类名
      const updateRequiredClassForColumns = (columns) => {
        columns.forEach(column => {
          if (requiredColumns.includes(column.dataIndex)) {
            column.className = this.isShowStar ? "form-table-col--required" : "";
          }
        });
      };
      // 更新所有相关列的样式
      updateRequiredClassForColumns(this.被操作列表);
    }
  }

比如：

   columns: [
        {
          title: "#",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: "费用类型",
          align: "center",
          width: 250,
          dataIndex: "type",
          // class: "form-table-col--required",
          className: "",
          scopedSlots: { customRender: "type" }
        },
        {
          title: "报销金额（元）",
          align: "center",
          width: 250,
          // class: "form-table-col--required",
          className: "",
          dataIndex: "recipientAmount",
          scopedSlots: { customRender: "recipientAmount" }
        },
        {
          title: "报销详情",
          align: "center",
          // class: "form-table-col--required",
          className: "",
          dataIndex: "detail",
          scopedSlots: { customRender: "detail" }
        }
      ],

对应着

    updateColumnClasses: function () {
      // 指定需要添加样式的列
      const requiredColumns = ["type", "recipientAmount", "detail"];
      // 函数：更新指定列数组中的类名
      const updateRequiredClassForColumns = (columns) => {
        columns.forEach(column => {
          if (requiredColumns.includes(column.dataIndex)) {
            column.className = this.isShowStar ? "form-table-col--required" : "";
          }
        });
      };
      // 更新所有相关列的样式
      updateRequiredClassForColumns(this.columns);
    }