vue elment 以及样式修改 小知识点

vuex值 刷新不变 状态持久化
存储在vuex内的数据，进行调用的时候
//vuex内部代码写法
mutations:{
	函数1(state){
		state.name="新值";
		window.localStorage.setItem("name",JSON.stringify(新值))
	},
	函数2(state,status){
		state.name=status;
	}
},
actions:{
	函数3({ commit }){
		let names=JSON.parse(localStorage.getItem("name"));
		commit('函数2',names)
	}
}
//vue文件内代码写法
<h1>{ $store.state.name }</h1>
methods:{
	函数(){
		this.$store.commit('函数1') //这里的函数是vuex内的函数1调用
	}
},
mounted(){
	this.$store.dispatch('函数3') //这里是调用的vuex里面的函数2
}

动态加类

:class="{tagBg:true,tagBgs:type=='MyBeihuo'?true:false}"
.tagBgs{
    	background: linear-gradient(90deg, #7D8FF5 0%, #FFFFFF 100%);
  }

更改表头颜色

    :header-cell-style="getRowClass"
    --------------
     methods: {
    getRowClass(){
       return 'background:#065AE7;color:#fff;text-align:center;font-size:14px;font-weight:600;'
    },

分页按钮背景颜色
// 分页样式
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color:#065AE7; //修改后的背景图颜色
    color: #fff;
  }

加入小圆点
// &::before {  //注释了在文字前方的小圆点
        //   content: '';
        //   background: #f00;
        //   display: inline-block;
        //   width: 8px;
        //   height: 8px;
        //   border-radius: 50%;
        //   position: relative;
        //   margin-right: 2px;
        // }

tabel加红点

:required="true"

更改表格文字过多排列问题
 .change-label-calss ::v-deep .el-form-item__label{
        line-height: 17px;
    }

加在元素后面  内容或者 图片都可以
 .inputhidden::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #065AE7;
    background-image: url("../../../assets/update/img/up.png") ;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px ;
    position: absolute;
    right: -30px;
    top: 13px;
}

input输入框的样式
.contentcha { //卡片
  ::v-deep {
    .from-ipt {	//from身上
      .el-form-item__label {
        font-size: 14px !important;
        font-weight: 500;
        color: #333333;
      }
      .el-form-item {
        margin: 0 20px !important;
      }
      .mt20 {
        margin-top: 20px !important;
      }
      .el-input__inner {
        width: 240px !important;
        height: 30px !important;
        border-radius: 0% !important;
      }
    }
  }
}

===============
slot="content" 加类名 contentcha
el-form加类名 qyery-info
 .contentcha {
    //卡片

    .qyery-info {
      //from身上
      .el-form-item__label {
        font-size: 14px !important;
        font-weight: 500;
        color: #333333;
      }
      .el-input__inner {
        width: 240px !important;
        height: 30px !important;
        border-radius: 0% !important;
      }
    }
  }

el-form 统一   label-width="98px"

父元素加，一行三个，每个宽度设置```
 display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
  
  grid-row-gap: 10px; //设置上下间距
  //  grid-column-gap: 20px; 设置左右间距


```javascript
在这里插入代码片

form嵌套规则
 .el-form-item{
    margin: 10px 0 0;
  }
  .el-form-item__label {
        font-size: 14px !important;
        font-weight: 500;
        color: #333333;
        
      }
      .el-input__inner {
        width: 240px !important;
        height: 30px !important;
        border-radius: 0% !important;
       
     }

归档2

流程中1

表单三木添加内容

   <template slot-scope="scope">
                <div v-if="scope.row.uniflowStatus==2">
                 <img src="../../../assets/update/img/lv.png" alt=""> {{scope.row.uniflowStatus==2?"归档":""}}
                </div>
                <div v-if="scope.row.uniflowStatus==1">
                  <img src="../../../assets/update/img/hong.png" alt=""> {{scope.row.uniflowStatus==1?"流程中":""}}
                </div>
         </template>

样式强制
查询条件样式强制
		.qyery-info{
			::v-deep.el-form-item__label {
				font-size: 14px !important;
				font-weight: 500;
				color: #333333;
			}
			::v-deep.el-input__inner {
					width: 240px !important;
					height: 30px !important;
					border-radius: 0% !important;
			}	
			.fonts{
				 ::v-deep.el-form-item__label{
						line-height: 17px;
					}
			}	
		}

标签：__,知识点,vue,form,el,elment,important,background,font
来源： https://blog.csdn.net/weixin_44040867/article/details/120523837