一般来说
<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>