element组件样式修改方式

目录

一、表格样式需求：

1、表格表头居中：加上 align="center"即可

二、弹窗

2、对话框修改为圆角

3、修改文字标题样式：

4、Select 选择器

 5、更改选择器样式

三、小功能

1、输入框 el-input 调整高度，可以用size调整

2、hr 修改样式

3、将整个背景设置颜色

4、el-input 组件绑定事件

---

提前说明注意点：使用deep深度修改时，外面要包一层div，防止更改全局样式比如：

.visitors-container{
    ::v-deep{
      .el-dialog__body{
        padding: 0 0 30px 0 ;
      }
      .el-dialog{
        border-radius: 8px;
      }
      .headHead{
        background-color: #FAFAFA;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
      }
    }
  }

或者在style标签上添加scoped属性，以表示它的样式作用于当下的模块，实现样式私有化的目的

<style lang="scss" scoped>

一、表格样式需求：

1、表格表头居中：加上 align="center"即可

<el-table-column
  prop="date"
  label="日期"
  width="180"
  align="center">
</el-table-column>

二、弹窗

1、在弹出框中，添加自定义html样式，建议使用Dialog 对话框

<!-- 新增弹框 -->
    <el-dialog
      title="标签设置"
      width="25%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
      @close="cancleAddRoles"
    >
    <div class="labelSettings">
      <el-input style="width:340px; height:32px;" v-model="input" placeholder="添加新的标签"></el-input> 
      <img style="width:32px; height:32px" src="@/assets/image/addlabel.png" alt=""> 
    </div>
    </el-dialog>

。。。

data() {
      return {
        showDialog: false, // 控制弹框的隐藏和展示
      }

。。。

methods: {
      // 逻辑
      Setlabel(){
        // 判断是否勾选用户
        if (this.multipleSelection.length == 0) {
          this.$message('请勾选需要操作的人员')
          return
        }
        // 开启弹窗
        this.showDialog = true
      }
}

2、对话框修改为圆角

::v-deep .el-dialog{
    border-radius: 8px;
}

3、修改文字标题样式：

<el-dialog title="replace" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
  <template slot='title'>
	<span style="font-size:14px;font-weight:700">原始资源库</span>
  </template>
</el-dialog>

4、Select 选择器

要改选中颜色，但是 .el-select-dropdown__item.selected 类名不好使，解决方法

<el-select placeholder="请选择" :popper-append-to-body="false">
...
</<el-select>


。。。。。。


::v-deep .el-select-dropdown__item.selected{
    color: #149f97;
  }

 5、更改选择器样式

// 将光标去掉
    .model-box{
      ::v-deep .el-input__inner{
        cursor:pointer;
        caret-color:transparent;
      }
    }

// 型号选项弹窗
  .ModelOptionsBox{
    position: absolute;
    top: 243px;
    left: 50px;
    background-color: #fff;
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
    width: 350px;
    min-height: 40px;
    // 最上面的添加与搜索选项
    .addModel{
      width: 350px;
      height: 40px;
      background: rgba(232,41,41,0.06);
      z-index: 2035;
      .left{
        width: 16px;
        height: 16px;
        position: absolute;
        left: 15px;
        top: 12px;
      }
      .center{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #E82929;
        position: absolute;
        top: 10px;
        left: 39px;
      }
      .right{
        width: 16px;
        height: 16px;
        position: absolute;
        top: 13px;
        right: 15px;
      }
    }
  }

三、小功能

1、输入框 el-input 调整高度，可以用size调整

<el-input size="small" style="width:340px; height:32px;" v-model="input" placeholder="添加新的标签"></el-input> 

2、hr 修改样式

hr{
    background-color: #E9E9E9;
    height: 1px;
    border: none;
  }

3、将整个背景设置颜色

可以用最小高度

.main {
  min-height: calc(100vh - 0px);
  width: 100%;
  background: #f1f2f6;
}

4、el-input 组件绑定事件

直接添加是无效的，需要使用使用 v-on 的修饰符.native，@click.native

<el-input v-model="ruleForm.region" placeholder="请选择" style="width:350px;" @click.native="modelInput"></el-input>