修改element UI的标签样式大全

 1、表格外部定义一个div并命名class为provinceScreen（自定义名称）

<div class="provinceScreen">

<el-table :data="tableData" style="width: 100%" height="calc(100vh - 260px)" ref="multipleTableRef" @row-click="rowClick" :row-style="cellStyle"
        :header-cell-style="{//表格头部样式
              background: 'rgb(72,93,120)',
              color: '#ffffff',
              border: 'none !important',
              // textAlign: 'center',
            //   fontSize: '30px',
              padding: '0'
            }" 
          :cell-style="{
            background: 'rgb(41 46 52) !important',
            border: 'none',
            // fontSize: '30px',
            }">
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" :index="indexMethod" width="70">
            </el-table-column>
            <!-- <el-table-column label="编号" width="70">
                <template #default="scope">
                    <div>{{ scope.row.id }}</div>
                </template>
            </el-table-column> -->
            <el-table-column label="岗位编码">
                <template #default="scope">
                    <div>{{ scope.row.workPostCod }}</div>
                </template>
            </el-table-column>
            <el-table-column label="岗位名称">
                <template #default="scope">
                    <div>{{ scope.row.workPostName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="工厂名称">
                <template #default="scope">
                    <div>{{ scope.row.factoryName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="部门名称" width="170">
                <template #default="scope">
                    <div>{{ scope.row.departmentName }}</div>
                </template>
            </el-table-column>
            <el-table-column label="备注">
                <template #default="scope">
                    <div>{{ scope.row.remark }}</div>
                </template>
            </el-table-column>
            <el-table-column label="排序">
                <template #default="scope">
                    <div>{{ scope.row.sort }}</div>
                </template>
            </el-table-column>
            <el-table-column label="创建人">
                <template #default="scope">
                    <div>{{ scope.row.createUser }}</div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="170">
                <template #default="scope">
                    <div>{{ scope.row.createTime }}</div>
                </template>
            </el-table-column>
            <el-table-column label="修改人">
                <template #default="scope">
                    <div>{{ scope.row.updateUser }}</div>
                </template>
            </el-table-column>
            <el-table-column label="修改时间" width="170">
                <template #default="scope">
                    <div>{{ scope.row.updateTime }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="right" width="200">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-popconfirm title="确定要删除吗?" @confirm="handleDelete(scope.$index, scope.row)"
                        confirm-button-text="是" cancel-button-text="否">
                        <template #reference>
                            <el-button size="small" type="danger">删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :total="form.Total" @current-change="handleCurrentChange" v-model:current-page="form.pageIndex"
            v-model:page-size="form.pageSize" :page-sizes="[10, 20, 50, 100]" background
            layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" />
        </div>
<script>
//行选中样式
const cellStyle = (row:any) =>{
  if(state.checkNumber === row.row.id){
    return {
      color:"#ffd04b !important",
      cursor:"pointer"
    }
  }
  return {color:"#fff !important",cursor:"pointer"}
}

//分页
const handleCurrentChange = (val: number) => {
    form.pageIndex = val//赋值
    LoadTableData()//自定义表格加载方法
}
//分页改变监听
const handleSizeChange = (val: number) => {
    form.pageSize = val//赋值
    LoadTableData()//自定义表格加载方法
}
</script>

2、下面为修改样式大全（除了table外其他外部不需要套div）

//修改表格样式
.provinceScreen {
  :deep(.el-table) {
    background-color: transparent;
    // border: rgb(40,118,193) 1px solid;
    border-bottom: none !important;
  }

  :deep(.el-table tr) {
    background-color: transparent !important;
  }

  :deep(.el-table .cell) {
    font-size: 16px;
    // color: #fff;
    text-align: center;
    background-color: transparent;
    // border:rgb(40,118,193) 1px solid;
  }

  :deep(.el-table::before) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
  :deep(.el-table__inner-wrapper::before){
    background: none !important;
  }
}
/*分页样式 */
:deep(.el-pagination__total),:deep(.el-pagination__goto),:deep(.el-pagination__classifier){color:#ffffff !important}


/*input框样式 */
:deep(.el-input__wrapper){
    // background:none;
    background: rgba(75,86,255,.1) !important;
    box-shadow:none;
    border: 1px solid rgba(84,73,121,.5);
    border-radius: 4px;
}
:deep(.el-input__inner){
    // background: rgba(84,73,121,.5) !important;
    color: #fff;
}

:deep(.el-input__inner){
    // background: rgba(84,73,121,.5) !important;
    color: #fff;
}

:deep(.input-with-select){
    background: rgba(75,86,255,.1) !important;
}
:deep(.el-input__wrapper){
    // background:none;
    background: rgba(75,86,255,.1) !important;
    box-shadow:none;
}
:deep(.el-input-group__append, .el-input-group__prepend){

    background: rgba(75,86,255,.1) !important;
    box-shadow:none;
}

//修改上传文件样式
:deep(.el-upload-dragger){
    background-color: rgb(44,36,82) !important;
}
//修改单选框样式
:deep(.el-radio__input.is-checked .el-radio__inner){
    border-color: #FA2755;
    background: rgb(58, 53, 102);
}
:deep(.el-radio__inner::after){
    width: 7px;
    height: 7px;
    background-color: #FA2755;
}
:deep(.el-radio__inner){
    background: rgb(58, 53, 102);
}
:deep(.el-radio__input.is-checked+.el-radio__label){
    color:#FA2755;
}
:deep(.el-radio__label){
    color:#fff;
}
/*input框样式*/
:deep(.el-textarea__inner){
    // background: transparent;
    background: #1c1736;
    color:#fff;
    box-shadow:none;
    border: 1px solid #3a3566;
    border-radius: 10px;
}
//修改上传文件样式
:deep(.el-upload-dragger){
    background-color: rgb(44,36,82) !important;
}
//修改单选框样式
:deep(.el-radio__input.is-checked .el-radio__inner){
    border-color: #FA2755;
    background: rgb(58, 53, 102);
}
:deep(.el-radio__inner::after){
    width: 7px;
    height: 7px;
    background-color: #FA2755;
}
:deep(.el-radio__inner){
    background: rgb(58, 53, 102);
}
:deep(.el-radio__input.is-checked+.el-radio__label){
    color:#FA2755;
}
:deep(.el-radio__label){
    color:#fff;
}

/*修改弹出层样式 */
:deep(.el-dialog__title){
    color:#fff;
}
:deep(.el-form-item__label){
    color:#fff;
}
:deep(.el-dialog){
    background:rgb(58,53,102) !important;
}
/*input禁用下的样式 */
:deep(.el-textarea.is-disabled .el-textarea__inner){
    background: none !important;
}
/*修改抽屉式样式*/
:deep(.el-drawer__title){
    color:#fff;
}
:deep(.el-drawer){
    background:rgb(58,53,102) !important;
}
/*多选框样式 */
:deep(.el-checkbox__label){
    color:#fff;
}
/*文本输入框限制数量背景 */
:deep(.el-textarea .el-input__count){
    background: none !important;
}
/*穿梭框样式 */
:deep(.el-transfer-panel__body){
    background:rgb(58,53,102) !important;
    // border: 1px solid red;
}
:deep(.el-transfer-panel__header){
    background:rgb(58,53,102) !important;
    color: #fff;
}
:deep(.el-transfer-panel__header .el-checkbox__label){
    color: #fff !important;
}

3、设置点击行变色

/*设置点击行背景色*/
.el-table__body tr.current-row > td {
  // color:red;
  background: #84bef7 !important;
}