element Table表格 加了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"
            >

给列加上这句话 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>