一般来说 

<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>

 

GitHub 加速计划 / eleme / element
14
2
下载
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 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐