element Table表格 加了show-overflow-tooltip 之后没有显示省略号
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
一般来说
<el-table-column
v-for="(item, index) in logTableHeader"
:key="index"
:label="item.label"
:prop="item.prop"
align="left"
show-overflow-tooltip
:cell-style="cellStyle"
>
给列加上这句话 show-overflow-tooltip 就没有问题 为什么没有作用呢
因为你使用了插槽自定义了表格中的内容,还有一些自定义的功能需要完成,设置show-overflow-tooltip属性后生效了,也一行展示了,但是超出的文字部分并没有显示省略号,经过我的仔细查找发现如果使用slot-scope,在列下面如果又嵌套元素,会导致该show-overflow-tooltip属性不会自动截断文字并展示省略号(…),
贴代码
<el-table-column
v-for="(item, index) in logTableHeader"
:key="index"
:label="item.label"
:prop="item.prop"
align="left"
show-overflow-tooltip
:cell-style="cellStyle"
>
<template slot-scope="scope">
<p
v-if="item.filter"
style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
>
{{ item.filter(scope.row) }}
</p>
<p
v-else-if="item.prop == 'chain_block_tx_id'"
@click="txHash(scope.row)"
>
{{ scope.row.chain_block_tx_id }}
</p>
<p v-else-if="item.prop == 'Level'">
<Dot status="fail" v-if="scope.row.Level == 'error'">
{{ scope.row.Level }}
</Dot>
<Dot status="warning" v-if="scope.row.status == 'warn'">
{{ scope.row.Level }}
</Dot>
<Dot status="success" v-if="scope.row.Level == 'info'">
{{ scope.row.Level }}
</Dot>
<Dot status="disable" v-if="scope.row.Level == 'debug'">
{{ scope.row.Level }}
</Dot>
</p>
<!-- <el-tooltip
v-else-if="item.prop == 'chain_block_tx_id'"
class="item"
effect="dark"
:content="scope.row.chain_block_tx_id"
placement="top"
>
<p @click="txHash(scope.row)">
{{ scope.row.chain_block_tx_id }}
</p>
</el-tooltip> -->
<p
v-else
style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
>
{{ scope.row[item.prop] }}
</p>
</template>
</el-table-column>
我使用了 slot-scope="scope"
所以 应该这样做
在你需要的地方 加上
style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
就行了
<template slot-scope="scope">
<p
v-if="item.filter"
style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
>
{{ item.filter(scope.row) }}
</p>
<p
v-else-if="item.prop == 'chain_block_tx_id'"
@click="txHash(scope.row)"
>
{{ scope.row.chain_block_tx_id }}
</p>
<p v-else-if="item.prop == 'Level'">
<Dot status="fail" v-if="scope.row.Level == 'error'">
{{ scope.row.Level }}
</Dot>
<Dot status="warning" v-if="scope.row.status == 'warn'">
{{ scope.row.Level }}
</Dot>
<Dot status="success" v-if="scope.row.Level == 'info'">
{{ scope.row.Level }}
</Dot>
<Dot status="disable" v-if="scope.row.Level == 'debug'">
{{ scope.row.Level }}
</Dot>
</p>
<!-- <el-tooltip
v-else-if="item.prop == 'chain_block_tx_id'"
class="item"
effect="dark"
:content="scope.row.chain_block_tx_id"
placement="top"
>
<p @click="txHash(scope.row)">
{{ scope.row.chain_block_tx_id }}
</p>
</el-tooltip> -->
<p
v-else
style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
>
{{ scope.row[item.prop] }}
</p>
</template>
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)