element-plus table修改样式_element plus table 改变边框样式

隔行修改样式 用:row-class-name

   <el-table :data="tableData"  style="width:95%" class="serve-table"  :row-class-name="tableRowClass" >
                <el-table-column prop="id" label="序号" width="70" />
                <el-table-column prop="name" label="服务接口名" width="130" />
                <el-table-column prop="address" label="服务接口描述" />
                <el-table-column prop="type" label="服务接口类型" />
                <el-table-column prop="provide" label="服务提供商" />
              </el-table>
<script setup>
import { ref } from 'vue'
 
const tableRowClass=({rowIndex})=>{
    if((rowIndex+1)%2==0){
        return 'warning-row'
    }else {
        return 'success-row'
    }
}
</script>
 
<style lang="scss" scoped>
 
::v-deep .el-table .warning-row{
     background: rgba(0, 163, 255, 0.1);
}
::v-deep .el-table .success-row{
     background: rgba(0, 194, 255, 0.05);
}
</style >

1. --el-table-border-color: none; 删除表格边框
2. --el-table-bg-color: none; 删除表格背景
3. --el-table-tr-bg-color: none;删除表头的背景颜色
4. 为表头添加颜色

   ::v-deep  .el-table th.el-table__cell{
       background: rgba(0, 163, 255, 0.1);
       color:#FFFFFF
     }
   

   输入框修改样式

1.修改placeholder样式

::v-deep .el-input__inner::placeholder{
     color: #FFFFFF;
}

2.如果有两个input但是样式不一样  就分别加类名 

  <el-select v-model="value" class="m-2" placeholder="服务供应商1" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> 
<el-input v-model='value' class="search"  placeholder="请输入关键字搜索"   :suffix-icon="Search"  />
//修改输入框样式 .search 相当于.el-input 
 ::v-deep .search .el-input__wrapper{
    width: 412px;
    height: 36px;
    background:transparent;
}
 
.el-select.m-2 {
    width: 131px;
    height: 36px;
}