替换: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; /* 你想要的宽度 */
}

效果

相关推荐
阿奇__7 小时前
elementUI table 多列排序并保持状态样式显示正确(无需修改源码)
前端·vue.js·elementui
H@Z*rTE|i1 天前
elementUi 当有弹窗的时候提示语被覆盖的问题
前端·javascript·elementui
阿奇__1 天前
vue2+elementUI table多个字段排序
前端·javascript·elementui
J总裁的小芒果1 天前
原生Table写一行保证两条数据
javascript·vue.js·elementui
沐墨染1 天前
大型数据分析组件前端实践:多维度检索与实时交互设计
前端·elementui·数据挖掘·数据分析·vue·交互
南玖i1 天前
SuperMap iServer + vue3 实现点聚合 超简单!
javascript·vue.js·elementui
麻瓜呀2 天前
vue2之el-table表格多选改单选
javascript·vue.js·elementui
weixin_584121432 天前
vue3+elementui+js自定义穿梭框布局
javascript·vue.js·elementui
qq_401967383 天前
element-plus table组件 封装列隐藏功能,并非 v-if 或 v-for,通过tableRef 与样式控制
javascript·vue.js·elementui
web小白成长日记3 天前
Vue3+ElementUI树形菜单:构建层次化用户界面
前端·microsoft·ui·面试·elementui