使用场景：

场景：本项目使用公司产品低开平台创建表单页面，支持通过配置修改表单样式，包括是否显示边框线，设置边框线颜色、宽度，修改label背景色等功能。

实现方法

实现上述功能，使用了一些elementUI组件，例如el-form表单。要想修改组件的样式，只能在原生的<style>标签修改。

<style>.controlFormBorder .el-form-item .el-form-item__label {background: #F2F9FC;border-right: #E4EEF6 1px solid;padding-left: 12px;height: 100%;line-height: 45px;}</style>

要动态修改组件的样式，可以通过动态加载css脚本实现。

实现步骤

创建formStyle.js文件，文件内容为需要修改的组件样式。

export default `.controlFormBorder {padding-top: 0 !important;padding-bottom: 0 !important;;}.controlFormBorder .el-form-item {margin: 0 !important;border-right: #E4EEF6 1px solid;height: 100%;}.controlFormBorder .el-form-item .el-form-item__label {background: #F2F9FC;border-right: #E4EEF6 1px solid;padding-left: 12px;height: 100%;line-height: 45px;}.controlFormBorder .el-form-item .el-form-item__content {position: relative;// line-height: 45px;line-height: 25px;margin-top: 10px;}`

在src/store/modules文件夹下创建globalForm.js文件，globalForm.js文件包含表单的配置信息

import _ from 'lodash'import styleJSON from '@/styles/formStyle'// 记录表单状态 false 未变 true 变动const formDesignData = {namespaced: true,state: {formModels: {}, //表单资源信息维护数据permission: null // 权限},getters: {get_permission: state => state.permission,get_formModels: state => state.formModels,},mutations: {SET_FORM_MODELS(state, data) {state.formModels = data},SET_PERMISSION(state, data) {state.permission = data},},actions: {setFormBorderStyle ({commit}, formModels) {let styleTag = document.getElementById('formBorderStyle')if (!styleTag) {// 动态创建style标签，插入到页面中styleTag = document.createElement('style')styleTag.setAttribute('id', 'formBorderStyle')document.head.appendChild(styleTag)}// 以 ; 为分隔符，分割样式，根据不同的关键字，进行内容替换，实现动态修改样式功能let styleJSONArr = styleJSON.split(';').map(item => {if (item.includes('background')) {try {return item.replace('#F2F9FC', _.get(formModels,'content.config.borderAttr.background','#F2F9FC'))} catch (e) {}} else {if (item.includes('#E4EEF6')) {try {return item.replace('#E4EEF6', _.get(formModels,'content.config.borderAttr.color','#E4EEF6'))} catch (e) {}} else {return item}}})styleTag.innerHTML = styleJSONArr.join(';')},},}export default formDesignData

在需要动态修改样式的页面，执行setFormBorderStyle方法x

<script>import {mapActions} from "vuex";export default{data(){return{}},mounted(){// 页面初始化时，调用setFormBorderStyle方法，修改表单样式this.setFormBorderStyle()},methods: {...mapActions('formDesignData', ['setFormBorderStyle']),}}</script>

效果