看板表格样式,去掉element表格背景
2024-01-03 17:33:32
<div class="ml-20">
<el-input v-model.trim="queryParams.wipOrderNo" size="small" clearable style="width:150px" placeholder="请输入工单号" />
<el-select class="ml-20" v-model="queryParams.progressStatus" filterable clearable style="width:150px" size="small" placeholder="请选择工单状态">
<el-option
v-for="item in progressoptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue">
</el-option>
</el-select>
<el-select class="ml-20" v-model="queryParams.progressStatus" filterable clearable style="width:150px" size="small" placeholder="请选择工单类型">
<el-option
v-for="item in progressoptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue">
</el-option>
</el-select>
<el-date-picker
v-model="time"
size="small"
style="width:350px"
class="mt-10"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
@change="dataChange"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
<el-button type="primary" size="small" class="ml-20" @click="handleQuery">查询</el-button>
<div class="mt-20 mr-20">
<el-table :data="dataList" class="Gradient">
<el-table-column label="工单号" align="center" prop="gongdanhao" />
<el-table-column label="工单状态" align="center" prop="zhuangtai" />
<el-table-column label="工单类型" align="center" prop="leixing" />
<el-table-column label="计划开始时间" align="center" prop="shijian" width="150px" />
<!-- :header-cell-style="{ background: 'linear-gradient(270deg, rgba(0,192,255,0.2) 0%, rgba(0,192,255,0.4) 45%, rgba(0,192,255,0.6) 72%, #00C0FF 100%)', color: '#ffffff', fontSize: '14px', textAlign: 'center' }"> -->
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button @click="bindingpoint(scope.row)" type="text" size="small" style="color: rgb(4, 192, 255);">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
style="text-align: center;margin:20px 0;"
:current-page="queryParams.pageNum"
:page-size="queryParams.pageSize"
:total="queryParams.total"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</div>
dataList:[
{
gongdanhao:'DB000001',
zhuangtai:'已接受',
leixing:'量产工单',
shijian:'2023-08-05 16:06:09'
},{
gongdanhao:'DB000001',
zhuangtai:'已接受',
leixing:'量产工单',
shijian:'2023-08-05 16:06:09'
},
{
gongdanhao:'DB000001',
zhuangtai:'已接受',
leixing:'量产工单',
shijian:'2023-08-05 16:06:09'
}
],
time:[],
queryParams:{
wipOrderNo:'',
progressStatus:'',
total:30
},
样式
.kanbanapp-main{
.el-input--small .el-input__inner{
border: rgba(204,202,204,0.2);
background:rgba(204,202,204,0.2);
color: #fff;
}
.el-range-editor--small.el-input__inner{
background:rgb(43 49 76);
// background:rgba(204,202,204,0.2);
border: rgba(204,202,204,0.2);
}
.el-range-editor--small .el-range-input{
background:rgb(43 49 76);
color: #fff;
// border: rgba(204,202,204,0.2);
}
.el-button--primary {
background: rgba(4, 192, 255, 1);
border-color: rgba(4, 192, 255, 1);
}
.Gradient.el-table::before {
height: 0;
}
.Gradient {
background: transparent!important;
}
.Gradient tbody tr {
background-color: transparent!important;
}
.Gradient thead tr {
background: linear-gradient(270deg, rgba(2, 67, 119,0.2) 0%, rgba(2, 67, 119,0.4) 45%, rgba(2, 67, 119,0.7) 72%, rgb(2, 67, 119) 100%) !important;
}
.Gradient .el-table__header-wrapper, .el-table__fixed-header-wrapper {
th {
background: none;
color: #fff;
font-size: 14px;
}
}
.Gradient .el-table__body tr:hover>td.el-table__cell {
background-color: transparent!important;
}
.Gradient td.el-table__cell {
border: 0;
color: #ffffff;
text-align: center;
font-size: 14px;
}
.Gradient .el-table .el-table__header-wrapper th{
background: transparent!important;
}
.el-pagination .el-select .el-input .el-input__inner{
background: none;
border: 1px solid #506B8A;
color: #84919A;
}
.el-pagination__editor.el-input .el-input__inner{
background: none;
border: 1px solid #506B8A;
color: #84919A;
}
.el-pagination .btn-prev{
background: none;
color: #84919A;
}
.el-pagination .btn-next{
background: none;
color: #84919A;
}
.el-pager li.active{
background: rgba(0, 192, 255, 1);
color: #fff;
}
.el-pagination__total{
color: #84919A;
}
.el-pager li{
background: none;
color: #84919A;
border: 1px solid #506B8A;
margin: 0 5px ;
}
.el-pagination__jump{
color: #84919A;
}
}
文章来源:https://blog.csdn.net/weixin_38999134/article/details/135365044
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!