Vue 3.0 + Element UI 中＜el-popover＞的使用

 1、有时在表格中内容过多会换行，这样列表看起来不太合适，此时我们可以使用popover提示信息，html部分

2、ts逻辑代码，在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, "
");
    },
}

 3、scss部分，可以设置popover框的宽高，设置popover框和popover框提示内容的最大高度，这样内容过多会出现纵向滚动条,从而达到使popover中的title固定的效果