el-table常用知识点1

济南小草根2024-11-21 11:53

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

复制代码

<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>