【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";},