Element UI 中＜el-popover＞的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了Element UI 中＜el-popover＞的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

有时在表格中会因为单元格的宽度过小，或者内容过多会换行，这样列表看起来有的行会高，有的行会矮，整体看起来不太和谐，也不美观

1、首先可以使用

我们可以使用popover提示信息，html部分

<el-table-column prop="address" label="address" min-width="100">
     <template #default="scope">
        <el-popover
            placement="right"
            :width="300"
            trigger="hover"
            show-arrow
            title="Address"
            popper-class="tooltip-wrap">
                <!-- 使用v-html渲染popover中现实的内容 -->
                <div
                  v-html="showAddressPopover(scope.row.address)"
                  class="popover-content">
                </div>
                <template #reference>
                    <!-- 给span设置一个样式，防止popover框发生位置偏移 -->
                  <span style="width:100px;display:inline-block;cursor:pointer">
                    {{ showAddressData(scope.row.address) }}
                  </span>
                </template>
         </el-popover>
     </template>
</el-table-column>

2、js逻辑代码，在html中直接判断有点不太合适，可以将其写成一个方法

methods:{
    //showAddressData()  处理表格中数据过长的问题，是内容溢出部分变为省略号
    //因为我这里传的 scope.row.address 是数组，所以我要在这里对数组进行处理操作
    showAddressData(cellValue) {
      if (cellValue && cellValue.length > 20) {
        let topictamp = cellValue.map((item) => {
          return item;
        });
        return topictamp.join(",").substr(0, 20) + "...";
        }
         if (cellValue && cellValue.length <= 20) {
             let topictamp = cellValue.map((item) => {
             return item;
             });
            return topictamp.join(",");
         }
      },

    //showAddressPopover()   渲染popover中提示的内容
    showAddressPopover(cellValue) {
       let temp= cellValue.map((item) => {
         return item;
       });

    //将得到的数据根据逗号进行换行，然后再使用v-html渲染到页面中
      return temp.join(",").replace(/\,/g, "</br>");
    },
}

3、css部分，可以设置popover框的宽高，设置popover框和popover框提示内容的最大高度，这样内容过多会出现纵向滚动条,从而达到使popover中的title固定的效果文章来源地址https://www.toymoban.com/news/detail-519342.html

<style lang="scss">
//设置popover框的最大高度
.tooltip-wrap {
  max-height: 200px;
}
//设置popover框提示内容的最大高度，内容过多出现纵向滚动条,固定popover中的title
.popover-content {
  max-height: 150px;
  overflow: auto;
  overflow-x: hidden;
}
</style>

到了这里，关于Element UI 中＜el-popover＞的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！