element-plus table修改样式

最新推荐文章于 2024-09-05 11:06:16 发布

m0_47450083

最新推荐文章于 2024-09-05 11:06:16 发布

阅读量830

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_47450083/article/details/130760241

版权

该文章展示了如何在Vue.js应用中使用el-table组件，并通过row-class-name属性实现隔行不同背景色的效果。同时，文章还详细说明了如何定制el-input组件的样式，包括placeholder颜色、输入框宽度和高度以及添加额外类名以区分不同输入框的样式。

摘要由CSDN通过智能技术生成

隔行修改样式用: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 >

--el-table-border-color: none; 删除表格边框
--el-table-bg-color: none; 删除表格背景
--el-table-tr-bg-color: none;删除表头的背景颜色

为表头添加颜色

::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;
}