el-table常用知识点1
实如今一个表格某一行数据的上方浮动一个图片<el-table :data="tableData" border
height="90%"
:style="{width: '100%'}"
>
<el-table-column prop="startDate" label="开始日期" align="center">
<template slot-scope="scope">
//判断是否为第一行；暂时使用这个，到时候后端返回一个状态码
<span v-if="scope.$index == 0">
//使用position：absolute绝对定位，相对于父级容器显示在居左3px居上3px
<span style="position: absolute;left: 3px;top: 3px"><img style="height: 40px;width: 40px" src="./img.png"></span>
<span>{{ scope.row.startDate }}</span>
</span>
<span v-else>{{ scope.row.startDate }}</span>
</template>
</el-table-column>
<el-table-column prop="endDate" label="结束日期" align="center"/>
<el-table-column prop="operatingConditionType" label="工况类型" align="center"/>
</el-table> 有的时间表格会存在没有滚动条的情况
这时间就不要给el-table表面再套一层这个div了，直接利用el-table，然后设置他的宽高
<div style="height: 100%">
<NormalCard title="指标设置" style="position:relative;height:60%;">
<div style="height: 10%;float: left">
<el-button @click="edit" type="primary" class="confirmBut" size="mini">编辑</el-button>
<el-button @click="save" type="primary" style="margin-left: 10px" size="mini">保存</el-button>
<el-button @click="cancal" type="primary" style="margin-left: 10px" size="mini">取消</el-button>
<!-- <el-button
type="primary"
size="mini"
@click="$router.replace({ path: '/indicatorWarning' })"
style="float: right"
>返回
</el-button>-->
<!-- <div>
<el-button
type="primary"
size="mini"
icon="el-icon-download"
@click="downloadTableone"
style="float: right"
>下载
</el-button></div>-->
</div>
<el-table id="zbsz" :data="tableData" height="calc(90% - 10px)" style="width: 100%;margin-top: 10px" highlight>
<el-table-column prop="title" label="指标项" align="center">
<template slot-scope="{row}">
<template v-if='row.parameterId=="InjVolume"'>注水量</template>
<template v-if='row.parameterId=="OilPress"'>油压</template>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]