element -plus中 show-overflow-tooltip 样式修改

局部修改;

<style lang="scss" scoped>
::v-deep(.el-popper.is-dark) {
  max-width: 50% !important;
  line-height: 24px;
  color: #fff !important;
  background-color: rgb(48, 65, 86) !important;
}
</style>

全局修改

<style>
.el-popper.is-dark {
  max-width: 50% !important;
  line-height: 24px;
  color: #fff !important;
  background-color: rgb(48, 65, 86) !important;
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过以下步骤来修改el-tableshow-overflow-tooltip样式: 1. 首先,你可以在表格列的<el-table-column>标签添加prop属性和label属性,例如:prop="description"和label="描述"。 2. 接下来,你可以添加show-overflow-tooltip属性,并将其设置为true,这样当描述列的内容过长时,将会显示tooltip来展示全部内容,例如::show-overflow-tooltip="true"。 3. 如果你想进一步自定义样式,你可以使用el-popover组件来替换show-overflow-tooltip。你可以在表格列的<el-table-column>标签使用<el-popover>组件,例如:prop="shareContent"和label="分享内容"。 4. 在<el-popover>,你可以使用slot-scope来获取每一行的数据,并在template进行样式的自定义。你可以使用placement属性来设置popover的显示位置,例如:placement="bottom"。 5. 你可以在template的<div class="set-popper">设置popover内容的样式,例如:width: 500px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 12; -webkit-box-orient: vertical;。 6. 同样地,你可以在<div slot="reference" class="set-content">设置表格内容的样式,例如:cursor: default; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;。 通过以上步骤,你可以修改el-tableshow-overflow-tooltip样式。你可以根据需要选择使用show-overflow-tooltip或者el-popover来满足你的需求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [elementui的el-table show-overflow-tooltip自定义样式](https://blog.csdn.net/weixin_49203377/article/details/128867984)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [el-table的show-overflow-tooltip内容过多,自定义样式](https://blog.csdn.net/qq_35516011/article/details/129612054)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值