日常开发记录-el-table-column省略号被隐藏

最新推荐文章于 2025-02-28 20:03:25 发布

原创最新推荐文章于 2025-02-28 20:03:25 发布 · 396 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui #前端 #ecmascript

当在表格列中使用`el-table-column`并设置`show-overflow-tooltip`时，发现tooltip显示正常但文字未出现省略号。问题出在模板中使用了`div`标签而非`span`标签。将`div`替换为`span`后，文字超出宽度会自动显示省略号，且tooltip正常工作。

问题：鼠标放在表格的列除，可以出现tooltip但是表格中的文字没有省略号...

错误效果图：

导致问题的原因：template中的需要使用span标签而不是div标签

错误代码展示：

<el-table-column prop="type" label="指标" width="180" show-overflow-tooltip>
      <template slot-scope="scope">
        <div>{{scope.row.type}}</div> <!-- div标签错误 -->
      </template>
    </el-table-column>

正确效果图：

正确代码展示：

<el-table-column prop="type" label="指标" width="180" show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{scope.row.type}}</span> <!-- span标签正确 -->
      </template>
    </el-table-column>