表格悬浮展示操作栏

element 表格 表格悬浮展示操作栏

每悬浮一列最左边或者最右边都会出现一个操作栏

html

<el-table  :data="data"> // 操作列     
  <el-table-column label="" fixed="left" width="100px" align="center">      
     <template #default="scope">  
         //操作具体代码
         <div class="operation"> 
          <span>删除</span>
         </div>  
     </template>         
     </el-table-column> // 其他列   
     <el-table-column v-for="(item, index) in Column" :prop="item.prop" :label="item.label" width="180"> 
     </el-table-column>
   </el-table>

css

// 悬浮操作栏 
.operation{ 
  display: none; 
  color:red
}
.el-table__body tr:hover > td .operation {
 display: block; 
}

注意这个时候悬浮不是停在固定列有不显示悬浮 要用.hover-row，如果没有固定列上面就够了，不需要用.hover-row

.el-table__body tr.hover-row>td {
  background-color: #F5F7FA; /* 设置背景颜色等等*/
  }
.el-table__body tr.hover-row>td .operation {
   display: block; 
 }