vueコンポーネントライブラリelement-uiよくある質問のまとめ

ps:element-uiのデフォルトのスタイルを変更する場合は、scopedを追加することはできません.グローバルスタイルを汚染しないように、一意の接頭辞を追加できます.
デフォルトのスタイルを変更するには、コンソールを開いてレベルとクラス名を表示することで変更できます.
El-table相関
1.hoverを変更するときの表の背景色

  .el-table .el-table__body-wrapper .el-table__body tr.el-table__row:hover > td{
      background-color: #ffffff !important;
  }
  //less    
  .el-table--enable-row-hover{
      .el-table__body{
        tr:hover>td{
          background-color: #ffffff !important;
        }
      }
    }

2.表ヘッダーの高さとスタイルを変更する

.el-table__header tr,.el-table__header th {
      padding: 0;
      height: 40px;
  }

3.表の内容の高さとスタイルを変更する

.el-table__body tr,.el-table__body td {
      height: 60px;
}

4.枠線表の枠線の色を変更する

.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
    border-color: #BFBFBF;
}

カバーを自分で追加できる色
5.表の複数行のマージ(マージ後の行の高さが開かないように)

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 4) {
     if (rowIndex % this.gridData.length === 0) {
       return [this.tableData.length, 1]
     } else {
       return [0, 0]
     }
   }
 },

この問題を解決するには、需要の最後の行から上へマージします.
6.表ヘッダーのスタイルを変更する方法header-cell-styleを直接追加

CSSスタイル(scopedは追加できません)

.el-table__header tr,.el-table__header th {
    padding: 0;
    height: 40px;
}

方法の変更(より柔軟に、異なるカラムのヘッダーを別々に操作できます)

// js  
getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) {
        return "background-color:#E8E9EA;font-size:13px;border-top-left-radius: 5px";
      }
      if (rowIndex === 0 && columnIndex === 5) {
        return "background-color:#E8E9EA;color:#606266;border-top-right-radius: 5px ";
      }
      if (rowIndex === 0 && columnIndex === 1) {
        return "background-color:#E8E9EA;color:#303133;";
      }
      if (rowIndex === 0 && 1 < columnIndex < 5) {
        return "background-color:#E8E9EA;color:#606266";
      }
    },

7.表外枠の追加

.el-tabs .payContent .el-table {
  border-right: 1px solid #e8e9ea;
  border-left: 1px solid #e8e9ea;
  border-radius: 5px;
  margin-top: 20px;
}

payContentは唯一の接頭辞であり、scopedを除去した後、グローバルスタイルを汚染しないようにする.
8.クリックして1行分のデータを取得する
バインディングrow-click

// js
rowMeth (row, column, event) {
    console.log(row)
},

   
El-formフォーム関連
1.入力ボックスの大きさ、高さ寸法の変更
element固有のsizeプロパティで変更

cssによる幅の定義

.inputClass {
   .el-input__inner {
     width: 240px;
     height: 40px;
   }
 }

inputClassグローバルスタイルの汚染を回避するための唯一のプレフィックス
2.elementフォーム検証

// js
rules: {
  name: [
    { required: true, message: '       ', trigger: 'blur' },
    { min: 3, max: 5, message: '    3   5    ', trigger: 'blur' }
  ],
  region: [
    { required: true, message: '       ', trigger: 'change' }
  ]
}

カスタム検証ルール

rules: {
  age: [{
    validator: (rule, value, callback) => {
      if (value !== '') {
        if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
          callback(new Error('     '))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    type: 'number',
    trigger: 'change'
  }]
}

   
El-dialogダイアログボックスにカスタムコンテンツのスタイル変更を埋め込む
ps:テーブルにネストされたダイアログを開くことができません.:append-to-body="true"の表示を追加できます.
タイトル文字

.el-dialog__title{
    somestyle
  }

header

.el-dialog__header {
	somestyle
  }

content

.el-dialog__body{
    somestyle
  }

footer

.el-dialog__footer{
	somestyle
  }

全体の内容

.el-dialog{
	somestyle
}

ps:element-uiのデフォルトスタイルを変更する場合は、scopedを追加して制限することはできません.また、グローバルスタイルを汚染しないように、一意の接頭辞をカスタマイズする必要があります.
       
しばらくこれらを記録して、もし官文を調べたり、私の話をしたりして、後期に補充し続けます.