vue element el-talbe-column tooltip用法

用法一：基本的悬停，内容过多，超出用tololtip展示，效果如下图所示 ：

代码展示：

<el-table-column prop="goodsSpecNames" header-align="center" align="center" label="影票信息" :show-overflow-tooltip="true"> </el-table-column>

 

 用法二：悬停展示自定义内容，效果如下图所示 ：

 代码展示：

<el-table-column prop="goodsPrice" header-align="center" align="center" width="150" label="价格">

          <template slot-scope="scope">

            <el-tooltip placement="right" effect="dark" :content="scope.row.promotionJson.data!=null?scope.row.promotionJson.data.ticket.name:'优惠折扣策略：无'">

                <span>{{ scope.row.goodsPrice }}</span>

            </el-tooltip>

          </template>

        </el-table-column>

 解释：在:content=“”中传入你需要展示的变量即可，tooltip就能生效，<span></span>中传入的值是该列原本需要展示的字段值，比如上图代码中的价格。

有疑问可以留言。感谢关注！