Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

//アウトラインポップアップウィンドウ outlineDialog: false,
//現在の行の標準サマリー standSummary: [],
// アウトラインポップアップウィンドウの位置コントロール outlineCard: {
    ページY: null、
    ページX: null、
    表示: 「なし」
}

<!-- プロジェクト概要 -->
<div class="summary-div" v-show="outlineDialog" ref="box-cardDiv" :style="outlineStyle" @mouseleave="leave">
    <div class="summary-title">プロジェクト概要</div>
    <ul class="summary-ul">
        <li class="summary-li"><span>標準名</span><span>必須ですか?</span><span>表示されますか?</span></li>
        <li v-for="(item, index) in standSummary" :key="index" class="summary-li"><span>{{item.inspectdetailName}}</span><span>{{item.isRequired ? 'はい' : 'いいえ'}}</span> <span>{{item.isDisplay ? 'はい' : 'いいえ'}}</span> </li>
    </ul>
</div>

<スタイル lang="scss">
#ボックスカードDiv {
    位置: 絶対;
}

.要約-div {
    境界線: 実線 1px #eee;
    背景色: #fff;
    境界線の半径: 4px;
    ボックスの影: 0 2px 12px 0 rgba(0, 0, 0, .1);
    パディング: 10px 10px 0 10px;
    幅: 300ピクセル;
    位置: 絶対;
    フォントサイズ: 13px;
}

.summary-ul {
    リストスタイル: なし;
    左パディング: 0;
    最大高さ: 350px;
    オーバーフロー-x:非表示;
    オーバーフロー-y: 自動;
}

.要約-li {
    マージン: 10px 10px 15px 10px;
    幅: 250ピクセル;
    テキストオーバーフロー: 省略記号;
    オーバーフロー: 非表示;
    /* 空白: nowrap; */
    ディスプレイ: フレックス;

    スパン {
        マージン: 自動;
        幅: 55px;
    }
}

.summary-li:first-child span:not(:first-child) {
    左マージン: 40px;
}

.summary-li:not(:first-child) span:nth-child(1) {
    幅: 90ピクセル;
}

.summary-li:not(:first-child) span:nth-child(2) {
    幅: 50px;
    左マージン: 45px;
}

.summary-li:not(:first-child) span:nth-child(3) {
    左マージン: 60px;
}

.要約タイトル{
    色: #cccccc;
    左マージン: 10px;
}
</スタイル>

<el-table-column label="プロジェクト概要" align="center" width="500">
    <テンプレートスロット="ヘッダー">
        <span>プロジェクト概要</span>
        <span class="vertical"></span>
    </テンプレート>
    <テンプレート スロット スコープ="スコープ">
        <div class="col-summmary-div">
            <span class="col-summmary-format"><span>{{scope.row.firstListItem}}</span></span>
            <span>&nbsp;{{scope.row.equInspectplanItemList.length}}&nbsp;アイテム</span>
            <i class="el-icon-arrow-down" @mouseenter="checkStandSunmmary(scope.row)"></i>
        </div>
    </テンプレート>
</el-table-column>

計算: {
    アウトラインスタイル() {
        h = 45 * this.standSummary.lengthとします。
        ブラウザを document.body.clientHeight - 50 とします。
        pageY を this.outlineCard.pageY - 50 とします。
        pageX を this.outlineCard.pageX - 280 とします。
        if (ページY + h > ブラウザ) {
            `left: ${ pageX }px; top: ${ (pageY-h) }px; position: absolute; display: ${ this.outlineCard.display }` を返します。
        } それ以外 {
            `left: ${ pageX }px; top: ${ (pageY-60) }px; position: absolute; display: ${ this.outlineCard.display }` を返します。
        }
    }
},

/**
 * マウスの標準要約を残す */
離れる（） {
    this.outlineCard.display = "なし";
    this.outlineDialog は false です。
},

/**
 * 現在の行の標準サマリー */
checkStandSunmmary(行) {
    アウトラインダイアログを true に設定します。
    this.standSummary = row.equInspectplanItemList;
    this.outlineCard.pageY = window.event.clientY;
    this.outlineCard.pageX = window.event.clientX;
    this.outlineCard.display = null;
},