vue多余数据显示点点点，并且可以复制

原创于 2023-11-07 11:42:17 发布 · 345 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

文章讨论了在表格列中如何使用模板插槽和el-tooltip实现对复杂json数据的高效显示，强调了代码中的宽度控制和文本溢出处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <el-table-column prop="jsonData" label="json数据" width="150" align="center" header-align="center">
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" :content="scope.row.jsonData" placement="top-start">
          <div>{{scope.row.jsonData}}</div>
        </el-tooltip> 
      </template>
      </el-table-column>

<style  scoped>
    .el-tooltip{
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      word-break: break-all;
    }
</style>