添加链接描述需求:给表头和表格底部下方添加变长border-bottom
如图
解决方法:
伪元素,设置width
- width不能固定,故在css中使用js变量,根据表头长度来计算width
- 先在表头及表格页面处加上:style=“cssVar”;
- 在计算属性中用表头的个数*单个表格的长度,最终得到的就是变长的border-bottom
Html:
<div class="schema-list-title" >
<span v-for="item in titleList" :key="item" class="schema-list-field" :style="cssVar">
<el-tooltip
class="item"
effect="dark"
:content="typeof item === 'object' ? item : JSON.stringify(item)"
placement="top"
>
<span class="schema-list-field" >{{ item }}</span>
</el-tooltip>
</span>
</div>
<div class="schema-list-content" >
<div
v-for="(item, index) in currentPageData"
:key="index"
class="schema-list-row"
:style="cssVar"
>
<p v-for="(i, a) in item" :key="a" class="schema-list-field">
<el-tooltip
effect="dark"
:content="i.toString()"
placement="top"
v-if="i"
>
<span class="schema-list-field">{{ i }}</span>
</el-tooltip>
<span v-else>--</span>
</p>
</div>
</div>
computed:{
cssVar(){
return{'--listLength':this.titleList.length * 150 +'px'}
}
}
.schema-list {
padding: 20px;
overflow-x: auto;
.schema-list-title,
.schema-list-row {
height: 45px;
line-height: 45px;
white-space: nowrap;
align-content: center;
position: relative;
::after {
content: " ";
position: absolute;
width: var(--listLength);
height: 1px;
bottom: 0px;
left: 0;
top:auto;
border-bottom: 0.01rem solid rgba(227, 229, 237, 5);
}
}
}