element表格樣式修改

 

 HTML代碼：

 <el-table
            :data="tableData"
            style="width: 100%"
            border
            :row-class-name="tableRowClassName">
            <el-table-column
              prop="date"
              label="用戶名">
            </el-table-column>
            <el-table-column
              prop="name"
              label="角色">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="">設置角色</el-button>
            <el-button
            size="mini"
            type="primary"
            @click="">修改密碼</el-button>
          <el-button
            size="mini"
            type="warning"
            @click="">刪除</el-button>
          </template>
            </el-table-column>
          </el-table>

 

 css代碼：

.el-table .warning-row {/*表格斑馬線*/
    background: #112336;
    }
    .el-table--border, .el-table--group {
    border:none;
    }
    .el-table .success-row {/*表格斑馬線*/
        background: #142d53;
    }
    .el-table th{        /*表頭顏色漸變*/
        background-image: linear-gradient(#2457a6,#133d7d );
    }
    .el-table--enable-row-hover .el-table__body tr:hover>td {/*表格選中顏色*/
        background-color: #70a6d0;
    }
    .el-table::before{/*表底部邊框*/
        height: 0px
    }
    .el-table td, .el-table th.is-leaf{/*表格內容樣式*/
        font-size:20px;
        border-bottom: 1px solid #112336;
    }
    .el-button--warning {  /*表格操作按鈕樣式*/
        background-image: linear-gradient(#b1975f,#6d390e );
        border:1px solid;
        border-color:#a77b45;
        border-radius:9px;
    }
    .el-button--primary {  /*表格操作按鈕樣式*/
        background-image: linear-gradient(#3487fe,#083d88 );
        border:1px solid;
        border-color:#548fe7;
        border-radius:9px;
    }
     .el-table th>.cell {/*表頭樣式*/
        text-align: center;
        color:#fff;
        font-size:22px
   }
     .el-table .cell{/*表格數據樣式*/
        text-align: center;
         color:#bfbfbf
   }