<template> <div style="flex: 1;"> <Container name="订单完成情况" size="small" class="wholeOrder"> <div style="width: 100%;padding: 10px; 20px"> <el-table :header-cell-style="{background:'rgba(4, 74, 132, 0.8)',color:'#fff',height: '40px',lineHeight: '40px', padding: 0,fontSize:'16px'}" :row-style="setRowStyle" :data="list" height="225" border style="width: 100%; background: transparent" > <el-table-column v-for="item in tableProps" :key="item.prop" :show-overflow-tooltip="item.showOverflowtooltip" v-bind="item" > <template slot-scope="scope"> <component :is="item.subcomponent" v-if="item.subcomponent" :inject-data="{...scope.row, ...item}" @emitData="emitData" /> <span v-else>{{ scope.row[item.prop] | commonFilter(item.filter) }}</span> </template> </el-table-column> <slot name="content" /> </el-table> </div> </Container> </div> </template> <script> // :header-cell-style="{background:'rgba(79,114,136,0.29)',color:'#fff'}" const tableProps = [ { prop: 'time', label: '添加时间', filter: parseTime, minWidth: 140 }, { prop: 'name', label: '订单名称', minWidth: 120, showOverflowtooltip: true }, { prop: 'code', label: '订单编码', minWidth: 180 }, { prop: 'customerId', label: '客户', showOverflowtooltip: true } ] import Container from '../components/Container.vue'; import { parseTime } from '@/utils/ruoyi' export default { name: 'OrderStatus', filters: { commonFilter: (source, filterType = a => a) => { return filterType(source) } }, components: { Container }, data() { return { tableProps, list:[ {time: '2023-12-12', name: '名称名称'}, {time: '2023-12-13', name: '名称名称'}, {time: '2023-12-14', name: '名称名称'}, {time: '2023-12-15', name: '名称名称'}, {time: '2023-12-16', name: '名称名称'}, {time: '2023-12-17', name: '名称名称'}, {time: '2023-12-18', name: '名称名称'}, {time: '2023-12-19', name: '名称名称'}, {time: '2023-12-20', name: '名称名称'}, {time: '2023-12-21', name: '名称名称'} ] } }, mounted() { }, methods:{ setRowStyle(v) { if (v.rowIndex % 2 === 0) { return { background: 'rgba(11, 84, 153, 0.5)', color: 'rgba(255,255,255,0.8)', height: '40px', lineHeight: '40px', padding: 0, fontSize: '16px' } } else { return { background: 'rgba(4, 74, 132, 0.5)', color: 'rgba(255,255,255,0.8)', height: '40px', lineHeight: '40px', padding: 0, fontSize: '16px' } } } } } </script> <style lang='scss'> .wholeOrder { .el-table { border: 0; } .el-table::before,.el-table--border::after { background-color: transparent; } .el-table th,td{ border-color: #0D1728 !important; padding: 0; } .el-table tr { background: transparent; } .el-table__row:hover > td { background-color: rgba(79,114,136,0.29) !important; } .el-table__row--striped:hover > td { background-color: rgba(79,114,136,0.29) !important; } // .el-table { // border: 0; // } // .el-table::before,.el-table--border::after { // background-color: transparent; // } // .el-table th,td{ // border-color: #0D1728 !important; // padding: 0; // } // .el-table tr { // background: transparent; // } // .el-table__row:hover > td { // background-color: rgba(79,114,136,0.29) !important; // } // .el-table__row--striped:hover > td { // background-color: rgba(79,114,136,0.29) !important; // } } </style>