【VUE】计算属性+动态样式方法封装

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

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

在utils下创建文件夹styleController
编写通用的方法

/**
 * 样式控制
 * 本文件主要提供一些动态控制样式的方法
 */

/**
 * 控制表格表头中的 某些列 是否显示星号*
 * @param showStarActions boolean 当值为True时，则添加显示星号的样式，若为False，则不添加。
 * @param columns
 * @param requiredColumnList
 *
 * 注意，需控制字段 的 属性 必须包含 className:""
 */
export function updateTableColumnClass(showStarActions,columns,requiredColumnList) {
    columns.forEach(column => {
      if (requiredColumnList.includes(column.dataIndex)) {
        column.className = showStarActions ? "form-table-col--required" : "";
      }
    });
    return columns;
}

接下来就是使用这个方法了：

 <ATable class="form-table" :data-source="model.inflowList" :columns="updateColumnClasses" row-key="id" :pagination="false">

  columns: [
        {
          title: "#",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: "收款时间",
          align: "center",
          dataIndex: "receiveDate",
          className: "",
          scopedSlots: { customRender: "receiveDate" }
        },
        {
          title: "收款金额",
          align: "center",
          width: 250,
          dataIndex: "receiveAmount",
          className: "",
          scopedSlots: { customRender: "receiveAmount" }
        },
        {
          title: "备注",
          align: "center",
          dataIndex: "remark",
          scopedSlots: { customRender: "remark" }
        }
      ],

  computed: {
    updateColumnClasses: function () {
      return updateTableColumnClass(this.isShowStar, this.columns, ["receiveAmount", "receiveDate"])
    }
  },
  mounted () {
    const action = this.$route.params.action;
    this.isShowStar = action === "add" || action === "edit" || action === "audit";
  },