el-table常用知识点1

实如今一个表格某一行数据的上方浮动一个图片

1. <el-table :data="tableData" border
2.           height="90%"
3.           :style="{width: '100%'}"
4. >
5.   <el-table-column prop="startDate" label="开始日期" align="center">
6.     <template slot-scope="scope">
7.     //判断是否为第一行；暂时使用这个，到时候后端返回一个状态码
8.       <span v-if="scope.$index == 0">
9.       //使用position：absolute绝对定位，相对于父级容器显示在居左3px居上3px
10.         <span style="position: absolute;left: 3px;top: 3px"><img style="height: 40px;width: 40px" src="./img.png"></span>
11.         <span>{{ scope.row.startDate }}</span>
12.       </span>
13.       <span v-else>{{ scope.row.startDate }}</span>
14.     </template>
15.   </el-table-column>
16.   <el-table-column prop="endDate" label="结束日期" align="center"/>
17.   <el-table-column prop="operatingConditionType" label="工况类型" align="center"/>
18. </el-table>

复制代码

有的时间表格会存在没有滚动条的情况 

这时间就不要给el-table表面再套一层这个div了，直接利用el-table，然后设置他的宽高

1. <div style="height: 100%">
2.   <NormalCard title="指标设置" style="position:relative;height:60%;">
3.     <div style="height: 10%;float: left">
4.       <el-button @click="edit" type="primary" class="confirmBut" size="mini">编辑</el-button>
5.       <el-button @click="save" type="primary" style="margin-left: 10px" size="mini">保存</el-button>
6.       <el-button @click="cancal" type="primary" style="margin-left: 10px" size="mini">取消</el-button>
7.       <!--          <el-button
8.                   type="primary"
9.                   size="mini"
10.                   @click="$router.replace({ path: '/indicatorWarning' })"
11.                   style="float: right"
12.                 >返回
13.                 </el-button>-->
14.       <!--          <div>
15.                   <el-button
16.                   type="primary"
17.                   size="mini"
18.                   icon="el-icon-download"
19.                   @click="downloadTableone"
20.                   style="float: right"
21.                 >下载
22.                 </el-button></div>-->
23.     </div>
24.       <el-table id="zbsz" :data="tableData" height="calc(90% - 10px)" style="width: 100%;margin-top: 10px" highlight>
25.         <el-table-column prop="title" label="指标项" align="center">
26.           <template slot-scope="{row}">
27.             <template v-if='row.parameterId=="InjVolume"'>注水量</template>
28.             <template v-if='row.parameterId=="OilPress"'>油压</template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。