<div class="bottomTable" v-show="coreState"> <el-table :data="tableData" style="width: 90%;" > <el-table-column prop="core" label="指标" width="300"> </el-table-column> <el-table-column prop="target" label="目标值" width="80"> </el-table-column> <el-table-column prop="finish" label="完成值" width="80"> </el-table-column> <el-table-column prop="finishRate" label="完成率%" width="100"> </el-table-column> </el-table> </div>怎么将这一行作为整体设置一张背景图片
时间: 2024-01-31 08:02:52 浏览: 118
你可以将这个 `<el-table>` 包裹在一个 `<div>` 容器中,并在这个容器中设置背景图片。同时,你需要为这个容器设置一个固定的高度,以确保背景图片可以显示完整。
以下是一个示例代码:
```html
<div class="bottomTable" v-show="coreState" style="height: 200px; background-image: url('your-image-url'); background-size: cover;">
<el-table :data="tableData" style="width: 90%;">
<el-table-column prop="core" label="指标" width="300"></el-table-column>
<el-table-column prop="target" label="目标值" width="80"></el-table-column>
<el-table-column prop="finish" label="完成值" width="80"></el-table-column>
<el-table-column prop="finishRate" label="完成率%" width="100"></el-table-column>
</el-table>
</div>
```
在这个示例中,我们将 `<el-table>` 包裹在一个 `<div>` 容器中,并在这个容器的样式中设置了背景图片。同时,我们为这个容器设置了一个固定的高度。注意,我们使用了 `background-size: cover;` 属性来设置背景图片的尺寸,这样可以保证图片可以完整地覆盖容器。
阅读全文
相关推荐





下列是“我的订单”页面,为什么给“评价”按钮添加一个“评论”对话框,整个页面就会消失不显示?<template> 我的订单({{ ordersData.length }}个) <el-table :data="ordersData" strip> <el-table-column label="商品图片" width="120px"> <template v-slot="scope"> <el-image style="width: 80px; height: 60px; border-radius: 3px" v-if="scope.row.goodsImg" :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image> </template> </el-table-column> <el-table-column prop="orderId" label="订单编号" width="140px"></el-table-column> <el-table-column prop="goodsName" label="商品名称" :show-overflow-tooltip="true" width="140px"> <template v-slot="scope"> {{scope.row.goodsName}} </template> </el-table-column> <el-table-column prop="businessName" label="店铺名称" :show-overflow-tooltip="true" width="100px"> <template v-slot="scope"> {{scope.row.businessName}} </template> </el-table-column> <el-table-column prop="goodsPrice" label="商品价格"> <template v-slot="scope"> {{scope.row.price}} / {{scope.row.goodsUnit}} </template> </el-table-column> <el-table-column prop="num" label="商品数量"></el-table-column> <el-table-column prop="price" labe








