不改变全局样式设置el-tooltip宽度

思路就是给el-tooltip插入插槽slot="content"，然后给插槽设置宽度

1、这个是网上找的

<el-table-column label="发布内容" header-align="center" align="center" show-overflow-tooltip>
  <template slot-scope="scope">
       <el-tooltip placement="top" v-if="contentDelImg(scope.row.content)>20" >
            <template slot="content">
               <p style="max-width:500px;">{{contentDelImg(scope.row.content)}}</p>
            </template>
            <div class="info-mes">{{contentDelImg(scope.row.content)}}</div>
         </el-tooltip>
         <div v-else>{{contentDelImg(scope.row.content)}}</div>
     </template>
 </el-table-column>

2、这个是我们项目中使用的

<el-table-column :label="col.label" :width="col.width">
   <template #default="scope">
      <el-tooltip class="item" effect="dark" placement="top-start">
          <div slot="content" class="text-wrapper">
             {{ scope.row.remark }}
          </div>
          <div class="one-line">{{ scope.row.remark }}</div>
       </el-tooltip>
     </template>
 </el-table-column>
      
      
<style lang="scss" scoped>
    .one-line {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .text-wrapper {
      max-width: 600px;
      white-space: pre-wrap;
    }
</style>

3、参考这个

          <el-table-column prop="reRemarks" label="短信备注" width="290px">
            <template #default="scope">
              <el-tooltip class="item" effect="dark" placement="top-start">
                <div slot="content" class="text-wrapper">
                  {{ scope.row.reRemarks }}
                </div>
                <div class="one-line">{{ scope.row.reRemarks }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          
     <style lang="scss" scoped>
     
     .one-line {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .text-wrapper {
          max-width: 600px;
        }
     
     </style>