<template> <div class="right-content-alert"> <div class="el-table-wrapper"> <el-table key="RightContentAlertTable" border :data="tableData" :header-cell-style="{ background: 'rgba(79,114,136,0.29)' }" > <el-table-column label="设备名称" prop="eqName" :show-overflow-tooltip="true" :resizable="true" /> <el-table-column label="所属产线" prop="plName" :show-overflow-tooltip="true" :resizable="true" /> <el-table-column label="故障等级" prop="level" :resizable="true" /> <el-table-column label="故障内容" prop="content" :resizable="true" /> <el-table-column label="累计时间(min)" prop="duration" :resizable="true" /> </el-table> </div> </div> </template> <script> // import TechyFakeTable from './TechyFakeTable.vue' // import TechyTable from './TechyTable.vue' const tableData = [ { eqName: 'A1下片机', plName: 'A', content: '123456', level: 3, duration: 10 }, { eqName: '磨片机', plName: 'A', content: '123456', level: 2, duration: 20 }, { eqName: 'B2钢化', plName: 'B', content: 'JQKA', level: 1, duration: 30 }, { eqName: '上片机', plName: 'C', content: 'xxx', level: 3, duration: 1 }, { eqName: '清洗机', plName: 'B', content: 'wowowowo', level: 2, duration: 2 } ] export default { name: 'RightContentAlert', components: {}, data() { return { tableData } }, created() {}, mounted() {}, methods: {} } </script> <style scoped> .left-content-equipment-check { display: flex; gap: calc(100vw / 1920 * 16); } .el-table-wrapper { flex: 1; } .left-content-equipment-check > div { overflow: hidden; overflow-x: scroll; } .el-table-wrapper >>> * { background: transparent; } .el-table-wrapper >>> .el-table::before, .el-table-wrapper >>> .el-table--group::after, .el-table-wrapper >>> .el-table--border::after { background: transparent; } .el-table-wrapper >>> .el-table { font-size: 8px; background-color: transparent; color: #fff9; border: 0; } .el-table-wrapper >>> .el-table th.is-leaf, .el-table-wrapper >>> .el-table td { border-color: #0d1728; padding: 0; } .el-table__row--striped:hover > td, .el-table-wrapper >>> .el-table__row:hover > td { background-color: rgba(79, 114, 136, 0.29) !important; } .el-table-wrapper >>> table { border: unset; } .el-table-wrapper >>> thead { color: #fff; } .el-table-wrapper >>> tr { background: unset; } .el-table-wrapper >>> tbody td > div, .el-table-wrapper >>> thead th > div { white-space: nowrap; } .el-table-wrapper >>> th, .el-table-wrapper >>> td { padding: 0; } .el-table-wrapper >>> tbody > tr:nth-child(even) { background: rgba(76, 97, 123, 0.2); } </style>