所以我想用css网格制作表，其中有5列，行数未知。单击第一个列元素时，我还会弹出一个元素。该弹出元素的覆盖范围是从第2列到第5列。其原因是我想保持从所有列可见到仅第一列的滚动位置。

我的问题是，随着数据量的增加，所有这些ng-repeats 都会变得缓慢。是否有一种方法可以统一所有彼此不在范围内的ng-repeat，而又不会失去列的这种分隔？

使用ng-repeat-start / end进行操作需要我将对象的数据元素包装到父元素中，但是这样会留给我自动生成的行和单元格，并且例如，我无法控制第一个COLUMN使其自身可滚动或设置特定高度。

（这是无法控制的）

<h1>Call List</h1>
<select>
    <option ng-repeat="list in vm.list">{{list.name}}</option>
</select>
<div class="call-list-grid" ng-init="vm.selected=false;">
    <div ng-click="vm.selected = !vm.selected" id="consumers" ng-repeat-start="list in vm.listdata">
        {{list.name}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="status">{{list.status}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="timezone">{{list.timezone}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="time">{{list.time}}</div>
    <div ng-if="!vm.selected" ng-click="vm.selected = vm.selected" id="guide" ng-repeat-end>{{list.guide}}</div>

    <div ng-if="vm.selected" id="selected-consumer"></div>
</div>

这是我目前拥有的代码，我正在尝试优化

<div class="container">
    <h1>Title header</h1>
    <select>
        <option ng-repeat="data in vm.data">{{list.name}}</option>
    </select>
    <div class="list-grid" id="grid" ng-class="{'selected' : vm.selected}"
         ng-init="vm.selected=false;">
        <div id="user" ng-class="{'user-selected' : vm.selected}">
            <div ng-click="vm.selectUser()" ng-repeat="list in vm.listdata">
               {{list.name}}
            </div>
        </div>
        <div id="status">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.status}}</div>
        </div>
        <div id="timezone">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.timezone}}</div>
        </div>
        <div id="time">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.time}}
            </div>
        </div>
        <div id="person">
            <div ng-if="!vm.selected" ng-class="{'user-selected' : vm.selected}"
                 ng-repeat="list in vm.listdata">
                {{list.person}}
            </div>
        </div>
        <div ng-if="vm.selected" id="selected">

        </div>
    </div>
</div>

.list-grid {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    row-gap: 2px;
    height: 77vh;
    overflow-x: hidden;

    &.consumer-selected {
        overflow: hidden;
    }
}

#user {
    grid-column-start: 1;
    grid-column-end: 2;

    // height: 100vh;
    // overflow: hidden;
    &.consumer-selected {
        overflow-y: auto;
        overflow-x: hidden;
        height: 77vh;
    }
}

#status {
    grid-column-start: 2;
    grid-column-end: 3;

    &.consumer-selected {
        display: none;
    }
}

#timzone {
    grid-column-start: 3;
    grid-column-end: 4;

    &.consumer-selected {
        display: none;
    }
}

#time {
    grid-column-start: 4;
    grid-column-end: 5;

    &.consumer-selected {
        display: none;
    }
}

#person{
    grid-column-start: 5;
    grid-column-end: 6;

    &.consumer-selected {
        display: none;
    }
}

#selected{
    background-color: rgb(177,218,177);
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row: 1 / 50;
    height: 77vh;
}