elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容

elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容 1.场景效果2.实现

1.场景效果

2.实现

          <el-table-column
            prop="pushContent"
            label="挂号短信内容"
            min-width="10%"
          >
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p style="max-width:600px;">{{ scope.row.pushContent }}</p>

                <div slot="reference" class="name-wrapper">
                  {{ scope.row.pushContent | ellipsis(30) }}
                </div>
              </el-popover>
            </template>
          </el-table-column>
//vue script
    //表格数据过滤
    ellipsis(value, limit) {
      if (!value) return "/";
      else if (value.length > limit) {
        return value.slice(0, limit) + "...";
      } else {
        return value;
      }
    },
  },

根据自己的需求改下prop值应该就可以了