旅游类网站怎么做,技术培训平台,alisql wordpress,软考培训机构排名ElementPlus表格中的背景透明
最近写大屏#xff0c;用到elementplus中的el-table#xff0c;为了让显示效果好看一点#xff0c;需要把表格的白色背景调整为透明#xff0c;与整个背景融为一体。可以参考的资料非常少#xff0c;大部分都是ElmentUI的方法#xff0c;在…ElementPlus表格中的背景透明
最近写大屏用到elementplus中的el-table为了让显示效果好看一点需要把表格的白色背景调整为透明与整个背景融为一体。可以参考的资料非常少大部分都是ElmentUI的方法在某个前端开发群里问了一下解决方案大佬给出的解决方案直接让我拍案叫绝记录一下以后翻起来更容易
直接上代码
templateel-table :datatableData height300 :row-stylerowstyleel-table-column v-for(item, index) in tableForm :keyindex :propitem.prop :labelitem.labelshow-overflow-tooltip/el-table-column/el-table
/templatescript setup
import { ref, onMounted, toRefs } from vue
// import { getHighwayTrafficApi } from /apis/predictTrafficconst tableForm [{ prop: road_name, label: 路名, width: 20 },{ prop: section_desc, label: 堵点, width: 40 },{ prop: speed, label: 速度, width: 20 },{ prop: status, label: 状态, width: 20 },{ prop: congestion_distance, label: 长度, width: 20 },{ prop: congestion_trend, label: 趋势, width: 20 },]const props defineProps({tableData: Array
})const rowstyle ({ row, rowIndex }) {if (rowIndex % 2 0) {return {backgroundColor: rgba(3, 76, 106, 1),}}
}/scriptstyle langscss scoped
.el-table {--el-table-border-color: transparent;--el-table-border: none;--el-table-text-color: #bdbdbe;--el-table-header-text-color: #bdbdbe;--el-table-row-hover-bg-color: transparent;--el-table-current-row-bg-color: transparent;--el-table-header-bg-color: transparent;--el-table-bg-color: transparent;--el-table-tr-bg-color: transparent;--el-table-expanded-cell-bg-color: transparent;
}
/style效果如下
