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