如何解决如何在slds表中实现冻结和覆盖列
如何使用 slds 表在 sfdc（salesforce）自定义闪电组件中实现以下功能
Frozen columns in HTML table has transparent overlay over rest of table
我创建了具有以下功能的 sld：
将前几列创建为固定（静态）并保留为具有更多行数（大约 50）的动态列
<div class="slds-scrollable_y" style="height:50rem;"><!--style="height:50rem;"-->
<div class="slds-scrollable_x" > <!-- style="width:150rem;"-->
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered"><!--slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered -->
<thead>
<tr>
<th >
<div class="slds-truncate" title="Product Name">Quality</div>
</th>
<th >
<div class="slds-truncate " title="Product Name">Product Group</div>
</th>
<th>
<div class="slds-truncate" title="Product Name">Country</div>
</th>
<th >
<div class="slds-truncate">Prev Yr Bal</div>
</th>
<th >
<div class="slds-truncate">Jan'{!v.twodigityear} </div>
</th>
<th >
<div class="slds-truncate" >Feb'{!v.twodigityear}</div>
</th>
<th>
<div class="slds-truncate">Mar'{!v.twodigityear}</div>
</th>
<th >
<div class="slds-truncate" title="Apr">Apr'{!v.twodigityear}</div>
</th>
<th >
<div class="slds-truncate" title="May">May'{!v.twodigityear}</div>
</th>
<th >
<div class="slds-truncate" title="Jun">Jun'{!v.twodigityear}</div>
</th>
<th >
<div class="slds-truncate" title="Jul">Jul'{!v.twodigityear}</div>
</th>
<th>
<div class="slds-truncate" title="Aug">Aug'{!v.twodigityear}</div>
</th>
<th>
<div class="slds-truncate" title="Sep">Sep'{!v.twodigityear}</div>
</th>
<th>
<div class="slds-truncate" title="Oct">Oct'{!v.twodigityear}</div>
</th>
<th>
<div class="slds-truncate" title="Nov">Nov'{!v.twodigityear}</div>
</th>
<th >
<div class="slds-truncate" title="Dec">Dec'{!v.twodigityear}</div>
</th>
<aura:iteration items="{!v.SalHeader}" var="sal" >
<th>
<div class="slds-truncate" title="{!sal.Name}"> <a href="{!'/one/one.app?#/sObject/'+ sal.Id + '/view'}" target="_blank">{!sal.Name}</a></div>
<div class="slds-truncate" title="{!sal.accName}">{!sal.accName}</div>
<div class="slds-truncate" title="{!sal.accName}">{!sal.Quality}</div>
<div class="slds-truncate" title="{!sal.Date}">{!sal.Date}</div>
<div class="slds-truncate" title="{!sal.Qty}">{!sal.Qty}</div>
</th>
</aura:iteration>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.ProductbalWrapper}" var="con">
<tr>
<th class="zui-sticky-col">
<div title="{!con.productName}">{!con.productName}</div>
</th>
<th class="zui-sticky-col-next" >
<div class="zui-sticky-col-next " title="Product Name">{!con.prdgrpname}</div>
</th>
<th >
<div class="slds-truncate" title="Product Name">{!con.countryName}</div>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.prevYearBal}">{!con.prevYearBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.janBal}">{!con.janBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.febBal}">{!con.febBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.marchBal}">{!con.marchBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.aprBal}">{!con.aprBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.mayBal}">{!con.mayBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.junBal}">{!con.juneBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.julBal}">{!con.julBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.augBal}">{!con.augBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.sepBal}">{!con.sepBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.octBal}">{!con.octBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.novBal}">{!con.novBal}</div>
</aura:if>
</th>
<th scope="row">
<aura:if isTrue="{!(con.productId !='')}">
<div class="slds-truncate" title="{!con.decBal}">{!con.decBal}</div>
</aura:if>
</th>
<aura:iteration items='{!con.delList}' var='delval' indexVar='key'>
<th scope="row" class="slds-is-resizable">
<aura:if isTrue="{!(con.productId !='')}">
<input type="text" id="{!delval.DelId + '|'+ con.productId +'|'+delval.invId}" value="{!delval.DelQty}" aria-describedby="error-message-unique-id" class="slds-input" aria-invalid="true" onblur="{!c.onblurvalidation}" />
<aura:set attribute="else">
<select class="slds-select" id="{!delval.DelId}" value="{!delval.invstatus}" onchange="{!c.handlestatusOnChange}" data-aura-rendered-by="61:636;a">
<option value="">None</option>
<aura:iteration items="{!v.statusMap}" var="ind" indexVar="key">
<option text="{!ind.value}" value="{!ind.key}" selected="{!ind.key==delval.invstatus}" />
</aura:iteration>
</select>
</aura:set>
</aura:if>
</th>
</aura:iteration>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</div>
固定列将被冻结，其他列可移动，并覆盖到带有水平和垂直条的固定布局。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
