element中修改 默认样式方法

1. 修改部分ui组件样式失效问题

<style scoped>scoped属性限制样式的作用域导致这个问题，解决：

• 去掉scoped，但是这样会污染全局样式，不过也可以通过给父元素独立的class名来避免全局污染；
• 深度作用选择器： >>> /deep/ ::v-deep 不过好像快要被废弃了不建议使用？？

2.通过添加class或者行内样式实现

<el-button :class="[selfbutton]"  :style='box'>111</el-button>

data() {
	return {
		selfbutton:"self_button"，
		box:{
			border:"1px solid red"
		},
	}
}

.self_button{
	background-color: red;
}

3.标题element中给table的tr/td添加类名

使用ui-element中table的
row-class-name 给tr添加类名
cell-class-name给td添加类名

<el-table  v-loading="tableLoad"  :data="tableData" :row-class-name="Rowname" >

    Rowname(row){
      console.log("添加表格行",row)
      return "Rowname1"
    },
  
  .Rowname1{
		background-color: red;
	}

注意：不能在 <style scoped>中使用类名，无效,配合 ::v-deep使用

4.label-position=“right” label-width=“250px” 需要在form标签上配合使用才可生效

待续。。。

最后

以上就是独特音响为你收集整理的element中修改 默认样式方法的全部内容，希望文章能够帮你解决element中修改 默认样式方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。