element-plus表格单元格内容过多隐藏，鼠标移入显示所有内容

先上效果图

表格部分的代码

<el-table
            :data="scope.row.list"
            :span-method="objectSpanMethod"
            border
            show-summary
            sum-text="总分"
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="价值观" prop="valuDescription"></el-table-column>
            <el-table-column label="行为" prop="actionDescription"></el-table-column>
            <el-table-column label="案例" prop="example"></el-table-column>
            <el-table-column label="自评" prop="selfScore" width="50"></el-table-column>
            <el-table-column label="部门" prop="leaderScore" width="50"></el-table-column>
            <el-table-column label="人事" prop="hrScore" width="50"></el-table-column>
            <el-table-column label="部门审批备注">
              <template #default="scope">
                <el-popover placement="top" :width="300" trigger="hover">
//下面这个div是显示在popover上的文字
                  <div>{{ scope.row.deptRemark }}</div>
//单元格显示的内容
                  <template #reference>
                    <div v-if="scope.row.deptRemark != null" style="font-size: 10px; color: gray">
                      <span  class="myNote">
                        {{ scope.row.deptRemark }}
                       
                      </span>
                    </div>
                  </template>
                </el-popover>
              </template>
            </el-table-column>
</el-table>

span加上了一个class，是用来隐藏多余文字的，超过一行就用省略号标识

css样式
.myNote {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

el-popover的插槽是用      <template #reference>表示的，容易和<div slot=reference>混淆，element-plus是支持vue3的，插槽使用也做了修改。