解决：el-table 设置了 :show-overflow-tooltip=“true“ 但是未生效折行

最新推荐文章于 2025-03-06 09:24:51 发布
最新推荐文章于 2025-03-06 09:24:51 发布
阅读量272 收藏
点赞数
文章标签： vue.js javascript 前端
原文链接：https://blog.youkuaiyun.com/liu__yuan/article/details/133316637
版权 
 

 

 

解决方法： 去掉style中的scoped
 

 

 


                

        

    

  



    

      

        

            

              
                
                  孟夏廿四
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示

				
			

			

				

					helenjuan的博客
				

				

					04-15
					
					4187
					
				

			

		

		

			
				
这里写自定义目录标题el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示
el-table设置show-overflow-tooltip属性后，数据过多时(超过3000字符)闪烁不显示
在table中设置了show-overflow-tooltip后,当某一列字符内容超长时,鼠标移入会出现闪烁不显示提示, 可以使用el-popover代替tooltip, 并且可以重写el-popover的样式, 保持跟tooltip提示框样式一致
<el-ta

			
		

	



                

            
              



	

		

			

				
					
自定义修改el-talbe show-overflow-tooltip的样式

				
			

			

				

					m0_38038870的博客
				

				

					06-16
					
					1万+
					
				

			

		

		

			
				
自定义el-table show-overflow-tooltip样式

			
		

	



              


  
              

                


	

		

			

				
					
el-table-column的show-overflow-tooltip属性不生效

				
			

			

				

					weixin_56385520的博客
				

				

					08-09
					
					917
					
				

			

		

		

			
				
可以看到手机号码过长滑过有悬浮显示，但是省略号消失并且文本被盖住半块，这时候我们可以在最外层标签添加样式overflow: hidden;出现情况：在使用插槽(<template slot-scope="scope">)进行数据渲染时，数据内容过长，溢出隐藏但是没有显示省略号。这样就能正常显示省略号了。

			
		

	





	

		

			

				
					
el-table中show-overflow-tooltip属性未生效

				
			

			

				

					蚂蚁搬砖我砌墙
				

				

					10-27
					
					3004
					
				

			

		

		

			
				
el-table中show-overflow-tooltip属性未生效

			
		

	



		

			
		



	

		

			

				
					
element-ui表格show-overflow-tooltip=“true“，鼠标移上去显示的宽度设置

				
			

			

				

					m0_46484437的博客
				

				

					03-06
					
					405
					
				

			

		

		

			
				
情景：在使用element-ui表格时，内容过多，选用属性show-overflow-tooltip="true"进行溢出处理，但是鼠标移上显示时，很不美观，但是 试了各种方法   都不行，最终采用迂回来实现。

			
		

	





	

		

			

				
					
前端Element-UI中show-overflow-tooltip属性不生效

				
			

			

				

					记录每一个不可被遗忘的代码
				

				

					06-16
					
					9737
					
				

			

		

		

			
				
el-table表格中设置show-overflow-tooltip属性,鼠标悬浮后，tooltip文本提示内容不显示

			
		

	





	

		

			

				
					
Vue进阶（幺陆零）：el-table之show-overflow-tooltip 属性不生效及webstorm持续updating indices解决方法

				
			

			

				

					IT全栈 华强工作室
				

				

					08-22
					
					1万+
					
				

			

		

		

			
				
在使用el-table表格时，有时会用到show-overflow-tooltip属性，即当单元格内容不能完全显示时显示tooltip文字提示，并且单元格里的内容显示省略号。但是在ie浏览器中有时单元格里的内容过长并且显示了省略号，但是鼠标滑上却不显示tooltip，这是因为单元格的padding-right影响到的，在css样式中添加以下代码即可：
.el-table .cell, .el-table th div {
	padding-right: 0;
}


...

			
		

	





	

		

			

				
					
element-ui表格show-overflow-tooltip="true"，鼠标移上去显示的宽度设置

					
热门推荐

				
			

			

				

					L-seeker-Q的博客
				

				

					02-26
					
					2万+
					
				

			

		

		

			
				
情景：在使用element-ui表格时，内容过多，选用属性show-overflow-tooltip="true"进行溢出处理，但是鼠标移上显示时，很不美观，效果如下:



解决办法：

tooltip的类是el-tooltip__popper，所有设置一下CSS样式控制宽度就行了，css样式代码如下：


 &lt;style lang="css"&gt;
  .el-tooltip__pop...

			
		

	





	

		

			

				
					
show-overflow-tooltip="true" el-table-column 的text-overflow: ellipsis不生效 怎样让它生效

				
			

			

				

					04-29
				

			

		

		

			
				
`text-overflow: ellipsis` 只能在设置了固定宽度的元素上生效，如果使用 `el-table-column`，需要在该列上设置 `width` 属性，例如：  ```html <el-table-column label="名称" prop="name" width="150">  ...

			
		

	





	

		

			

				
					
show-overflow-tooltip="true" el-table-column 的text-overflow: ellipsis控制台已经生效 页面没有效果

				
			

			

				

					04-29
				

			

		

		

			
				
`text-overflow: ellipsis` 是 CSS 属性，它可以让文本超出容器范围时自动截断并显示省略号，但是在某些情况下，它可能不会生效。如果在控制台中已经看到了效果，但是页面中没有生效，可能是因为其他 CSS 代码覆盖了...

			
		

	





	

		

			

				
					
Vue+Element Ui el-table列表中的tooltip内容过长超出屏幕换行显示

				
			

			

				

					蓝胖子的博客
				

				

					06-17
					
					1552
					
				

			

		

		

			
				
Vue+Element Ui el-table列表中的tooltip内容过长超出屏幕换行显示

			
		

	





	

		

			

				
					
el-table设置轻提示:show-overflow-tooltip=“true“，改变轻提示宽度

				
			

			

				

					m0_48884170的博客
				

				

					04-16
					
					1462
					
				

			

		

		

			
				
修改el-table中的轻提示的宽度，当el-table内容过长时，会选择设置轻提示。想要改变它的宽度，在scoped里面不会生效。但是内容太长时，它的宽度会默认占满全屏。可以再加一个style，设置它的宽度。也可以写在全局的公共样式中。

			
		

	





	

		

			

				
					
elementUI中template自定义文本后show-overflow-tooltip失效解决

				
			

			

				

					FinelyYang的专栏
				

				

					03-09
					
					8002
					
				

			

		

		

			
				
最近在开发中发现使用elementUI中template自定义文本，由于文本的长度较长，缩略展示配置:show-overflow-tooltip="true"，但没起作用。


<el-table
      :data="dataSource"
      :max-height="tableH"
      :height="tableH"
      v-loading.body=...

			
		

	





	

		

			

				
					
替换:show-overflow-tooltip=“true“ ，使用插槽tooltip，达到内容可复制

				
			

			

				

					qq_44309969的博客
				

				

					07-12
					
					727
					
				

			

		

		

			
				
el-table-column prop="reason" label="原因" align="center" :show-overflow-tooltip="true" />

			
		

	





	

		

			

				
					
element-Ui table内容只显示一行，超出的文字隐藏为...，鼠标移入显示所有内容。:show-overflow-tooltip=“true“，并设置弹出内容的宽度。

				
			

			

				

					qq_39877681的博客
				

				

					07-09
					
					1762
					
				

			

		

		

			
				
element-Ui table内容只显示一行，超出的文字隐藏为...，鼠标移入显示所有内容。:show-overflow-tooltip=“true“，并设置弹出内容的宽度。

			
		

	





	

		

			

				
					
el-table之show-overflow-tooltip 属性不生效

				
			

			

				

					qqpaowenquan的博客
				

				

					03-06
					
					4950
					
				

			

		

		

			
				
在使用el-table表格时有时会用到show-overflow-tooltip属性，既当单元格内容不能完全显示时显示tooltip文字提示，并且单元格里的内容显示省略号。但是在ie浏览器中有时单元格里的内容过长并且显示了省略号，但是鼠标滑上确不显示tooltip，这是因为单元格的padding-right影响到的，在css样式中添加以下代码即可：
.el-table .cell, .el-tab...

			
		

	





	

		

			

				
					
show-overflow-tooltip不生效

				
			

			

				

					qq_37855074的博客
				

				

					12-30
					
					8658
					
				

			

		

		

			
				
show-overflow-tooltip不生效
最近使用vue+elementUI进行开发，用到table组件，表格里面的文字短一点还可以，过长就会换行，想要文本在一行内显示，于是用了show-overflow-tooltip，但是有的表格show-overflow-tooltip生效了，有的表格不生效

不生效的代码如下

 <el-table-column prop="cooperateStatus" label="状态" min-width="110" align="center" show-

			
		

	





	

		

			

				
					
element-ui的show-overflow-tooltip不生效问题

				
			

			

				

					糖豆叭叭博客
				

				

					11-12
					
					6941
					
				

			

		

		

			
				
一、问题同上

正常官方文档是这样的


    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>

show-overflow-tooltip
			当内容过长被隐藏时显示 tooltip
			Boolean
			—
			false
		但是我引入没有生效；


    <el-table-column
  

			
		

	





	

		

			

				
					
下面表格solveFlag只有Y或N两个值，为N时整条数据背景颜色改为红色 <el-table :data="tableData" style="width: 100%" :highlight-current-row="true" max-height="750px" class="custom-table">
        <el-table-column type="index" label="序号" width="40" :index="1">
        </el-table-column>
        <el-table-column prop="alarmTimeKey" label="异常标识码" width="205"></el-table-column>
        <el-table-column prop="issueType" label="异常类型"></el-table-column>
        <el-table-column prop="factoryName" label="工段"></el-table-column>
        <el-table-column prop="alarmType" label="异常来源"></el-table-column>
        <el-table-column prop="alarmId" label="异常项目"></el-table-column>
        <el-table-column prop="alarmLevel" label="异常等级"></el-table-column>
        <el-table-column prop="machineName" label="设备"></el-table-column>
        <el-table-column prop="lotName" label="批次号"></el-table-column>
        <el-table-column prop="processOperationName" label="站点"></el-table-column>
        <el-table-column prop="processFlowName" label="工艺流程"></el-table-column>
        <el-table-column prop="productSpecName" label="产品料号"></el-table-column>
        <el-table-column prop="alarmComment" label="异常描述" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="reasonCodeType" label="异常CODE类型"></el-table-column>
        <el-table-column prop="reasonCode" label="异常数据"></el-table-column>
        <el-table-column prop="solveFlag" label="是否处理"></el-table-column>
        <el-table-column prop="solveUser" label="处理人员"></el-table-column>
        <el-table-column prop="solveReason" label="处理备注" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="endTime" label="异常开始时间"></el-table-column>
<!--        <el-table-column prop="startTime" label="异常开始时间" width="200">-->
<!--            <template slot-scope="scope">-->
<!--                <span>{{ scope.row.startTime }}</span>-->
<!--            </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="endTime" label="结案时间"></el-table-column>
        <!--                <el-table-column prop="endTime" label="结案时间" width="200">-->
        <!--                    <template slot-scope="scope">-->
        <!--                        <span>{{ scope.row.endTime }}</span>-->
        <!--                    </template>-->
        <!--                </el-table-column>-->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                >修改
                </el-button>
            </template>
        </el-table-column>
    </el-table>

					
最新发布

				
			

			

				

					03-11
				

			

		

		

			
				
<think>好的，我需要帮助用户实现在el-table中根据solveFlag的值设置行背景颜色。用户要求当solveFlag为N时，整行背景变为红色。下面是我的解决思路：

首先，用户使用的是Element UI的el-table组件。根据Element UI的文档，可以通过row-style属性来自定义行的样式。这个属性需要绑定一个函数，函数返回的样式对象会应用到对应的行上。

接下来，我需要编写一个方法，检查每一行的solveFlag值。如果该值为'N'，则返回一个样式对象，设置背景颜色为红色；否则返回空对象。这个方法应该接收一个参数，代表当前行的数据。

然后，在el-table组件中绑定这个row-style方法。这样在渲染每一行的时候，都会调用该方法判断是否需要应用红色背景。

需要注意的是，Element UI的row-style函数需要返回一个包含样式的对象，例如：{ backgroundColor: 'red' }。同时，要确保样式能正确应用到整行，可能需要检查是否有其他CSS样式覆盖，必要时可以添加!important来提升优先级。

最后，用户可能需要调整文字颜色以确保可读性，但用户没有提到这点，暂时可以忽略，或者作为建议提出。

可能的代码实现步骤：

1. 在Vue实例的methods中定义rowStyle方法，根据行的solveFlag值返回相应样式。
2. 在el-table组件上绑定:row-style="rowStyle"。
3. 测试功能，确保当solveFlag为N时行背景变红。

此外，可能需要处理行内样式的优先级问题，如果有其他样式干扰，可能需要调整CSS选择器的权重或使用!important。

总结：使用row-style属性配合自定义方法，判断solveFlag的值并返回对应的样式，即可实现需求。</think>根据Element UI表格行样式的设置要求，可以通过以下步骤实现根据solveFlag值改变行背景色：

### 一、核心实现步骤
1. **添加行样式方法**：
```javascript
methods: {
  rowStyle({ row }) {
    return row.solveFlag === 'N' 
      ? { backgroundColor: 'rgba(255, 0, 0, 0.3)' } 
      : {}
  }
}
```

2. **绑定表格属性**：
在el-table组件上添加`:row-class-name`和`:cell-style`的双保险设置（任选一种即可）：
```html
<el-table 
  :data="tableData"
  :row-style="rowStyle"  <!-- 直接绑定样式方法 -->
  ...其他属性
>
```

### 二、参数说明
1. **透明度控制**：`rgba(255, 0, 0, 0.3)`中的第四个参数：
   - `0.3`表示30%透明度（推荐值）
   - 可调整为`0.1~0.5`之间的值

2. **颜色代码替代方案**：
   ```javascript
   { backgroundColor: '#ff0000' }  // 纯红色十六进制
   { backgroundColor: 'rgb(255,0,0)' }  // 纯红色RGB
   ```

### 三、扩展功能建议
1. **行高亮增强**：
```javascript
rowStyle({ row }) {
  const style = {}
  if (row.solveFlag === 'N') {
    style.backgroundColor = '#ffebee'  // 浅红色系
    style.fontWeight = '600'          // 加粗字体
  }
  return style
}
```

2. **斑马纹兼容**：
```javascript
rowStyle({ row, rowIndex }) {
  const base = rowIndex % 2 === 0 
    ? { backgroundColor: '#fafafa' } 
    : { backgroundColor: '#fff' }
    
  return row.solveFlag === 'N' 
    ? { ...base, backgroundColor: '#ffebee' } 
    : base
}
```

### 四、注意事项
1. **样式优先级**：如果效果未生效，可在CSS文件中添加：
```css
.el-table .warning-row {
  background: rgba(255, 0, 0, 0.3) !important;
}
```

2. **

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值