需求：表格中展示多行信息，过多内容时利用“查看更多”

某个表格列表中，email列展示了多行的信息，当超过4条以上的数据时，希望点击“...”来查看更多

 <el-table-column
                align="center"
                label="NAME"
                prop="name"
                width="90"
              >
                <template #header>
                  <div>Name</div>
                  <div style="margin-top: 6px">
                    <el-input
                      placeholder="filter..."
                      size="small"
                      v-model="search.cname"
                      @change="handleSearch"
                    ></el-input>
                  </div>
                </template>
                <template #default="scope">
                  <div class="cardBox">
                    <div class="list">
                      <div
                        v-for="(items, index) in scope.row.contributorNames"
                        style="text-align: left"
                      >
                        <div
                          ref="textToCopy"
                          @click="addData($event, 'cname', items, items)"
                          class="overhiddle"
                          :title="items"
                        >
                          {{ items }}
                        </div>
                      </div>
                    </div>
                    <template v-if="scope.row.contributorNames.length > 4">
                      <el-button
                        size="small"
                        link
                        @click="checkMore($event)"
                        style="float: left; font-size: 11px"
                      >
                        <el-icon><MoreFilled /></el-icon>
                      </el-button>
                    </template>
                  </div>
                </template>
              </el-table-column>

checkMore方法：

const checkMore = (e) => {
  let currentNode = e.currentTarget.parentNode;
  if (currentNode.className.includes("authHeight")) {
    currentNode.classList.remove("authHeight");
  } else {
    currentNode.classList.add("authHeight");
  }
};

样式：

.cardBox {
  .list {
    max-height: 75px;
    overflow: hidden;
  }
  .down {
    display: block;
  }
  .up {
    display: none;
  }

  &.authHeight {
    .list {
      height: auto;
      max-height: inherit;
    }
    .down {
      display: none;
    }
    .up {
      display: block;
    }
  }
}