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

原生的show-overflow-tooltip="true" 不能满足条件,使用插槽自定义编辑;

旧code

javascript 复制代码
<el-table-column prop="reason" label="原因" align="center" :show-overflow-tooltip="true" />
<el-table-column prop="params" label="参数" align="center" :show-overflow-tooltip="true" />

新code

javascript 复制代码
<el-table-column prop="reason" label="原因" align="center">
  <template slot-scope="scope">
    <el-tooltip class="item" effect="dark" placement="top-start">
      <div slot="content">{{ scope.row.reason }}</div>
      <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
        {{ scope.row.reason }}
      </div>
    </el-tooltip>
  </template>
</el-table-column>
<el-table-column prop="params" label="参数" align="center">
  <template slot-scope="scope">
    <el-tooltip class="item" effect="dark" placement="top-start">
      <div slot="content">{{ scope.row.params }}</div>
      <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
        {{ scope.row.params }}
      </div>
    </el-tooltip>
  </template>
</el-table-column>

新css样式

css 复制代码
.el-tooltip__popper {
  max-width: 500px !important; /* 你想要的宽度 */
}

效果

相关推荐
A_nanda9 小时前
Vue2 表单提交异常详细排查方案
javascript·vue.js·elementui
千码君20164 天前
kotlin:jetpack compose 生成动态可控的动画
vue.js·elementui·kotlin
牧杉-惊蛰4 天前
修改表格选中时的背景色与鼠标滑过时的背景色
前端·javascript·css·vue.js·elementui·html
没有故事、有酒5 天前
Vue2中el-table修改表头高度和行高
javascript·vue.js·elementui
蒙面价肥猫6 天前
el-popconfirm 弹窗不显示问题总结
vue.js·elementui
蜡台7 天前
IDEA LiveTemplates Vue ElementUI
前端·vue.js·elementui·idea·livetemplates
邂逅星河浪漫9 天前
【Vue2-ElementUI】:model、v-model、prop
javascript·vue.js·elementui
cypking13 天前
二次封装ElementUI日期范围组件:打造带限制规则的Vue2 v-model响应式通用组件
前端·javascript·elementui
wangjinsheng59313 天前
Vue3 + Element Plus 前端 AI 编码模板
前端·vue.js·ai·elementui·ai编程
easyboot13 天前
使用element-plus的暗黑模式
javascript·vue.js·elementui