el-table-column内容超出显示省略号,鼠标经过弹出框内容自定义

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

el-tooltip el-table-column

打开边栏(ESC) 关闭边栏(ESC)

el-table-column内容超出显示省略号,鼠标经过弹出框内容自定义

from clipboard

如图，自定义内容，分为3行，3 个字段拼凑的

代码：

<el-table-column :label="$t(`bill.abstract`)" prop="abstract" width="130" align="center">
          <template slot-scope="scope">
              <el-tooltip 
                  effect="dark" 
                  placement="top-start"
                  popper-class="custom-tooltip"
              >
                <div slot="content">
                  {{ scope.row.abstract }}<br>
                  {{ scope.row.moneyTransferCardRemark }}<br>
                  {{ scope.row.legalNum }}
                </div>
                <span :style="{'color': !scope.row.transferImg ? '#606266' : '#409EFF'}">{{ scope.row.abstract }}</span>
                <el-image v-if="!!scope.row.transferImg" class="idImg" :src="scope.row.transferImg" :preview-src-list="[scope.row.transferImg]" />
              </el-tooltip>
          </template>
        </el-table-column>

css实现省略号效果

<style lang="scss">
.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

如果弹出框自定义内容有html元素，

<el-table-column :label="$t(`card.shopNum`)" prop="shopNum" width="130" align="center">
          <template slot-scope="scope">
              <el-tooltip 
                  effect="dark" 
                  placement="top-start"
                  popper-class="custom-tooltip"
                  :disabled="!scope.row.shops || scope.row.shops.length === 0"
              >
                <div slot="content" v-html="renderShopList(scope.row.shops)"></div>
                <span class="shop-count" :class="{ 'highlight': scope.row.shops && scope.row.shops.length > 0 }">
                    {{ scope.row.shopNum }}
                    <i class="el-icon-s-shop" v-if="scope.row.shops && scope.row.shops.length > 0"></i>
                </span>
              </el-tooltip>
          </template>
        </el-table-column>

赏