设置不定长border-bottom

添加链接描述需求：给表头和表格底部下方添加变长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-tooltipclass="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" ><divv-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-tooltipeffect="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);}}
}

vue2在css中使用js变量

设置不定长border-bottom相关推荐

串口IDLE空闲中断+DMA实现接收不定长数据基于stm32cubemx
引言:对于串口接收一些不定长的数据,必须面对一个问题:怎么判断一帧数据接收是否完成?通常使用RXNE非空中断配合简单的数据协议,在数据中加入帧头.帧尾,在程序中判断是否接收到帧尾来确定数据接收完毕,因 ...
STM32使用串口IDLE中断的两种接收不定长数据的方式
现在有很多数据处理都要用到不定长数据,而单片机串口的RXNE中断一次只能接收一个字节的数据,没有缓冲区,无法接收一帧多个数据,现提供两种利用串口IDLE空闲中断的方式接收一帧数据,方法如下: 方法1: ...
bufferedreader接收不到数据_FreeRTOS例程3-串口中断接收不定长的数据与二值信号量的使用
1 基础知识点 1.1 串口中断种类串口中断属于STM32本身的资源,不涉及到FreeRTOS,但可与FreeRTOS配合使用. 串口接收中断中断标志为:USART_IT_RXNE,即rx non ...
openmv串口数据串口助手_STM32 串口接收不定长数据 STM32 USART空闲检测中断
编者注: 单片机串口接收不定长数据时,必须面对的一个问题为:怎么判断这一包数据接收完成了呢?常见的方法主要有以下两种: 1.在接收数据时启动一个定时器,在指定时间间隔内没有接收到新数据,认为数据接收完 ...
【OCR技术系列之八】端到端不定长文本识别CRNN代码实现
CRNN是OCR领域非常经典且被广泛使用的识别算法,其理论基础可以参考我上一篇文章,本文将着重讲解CRNN代码实现过程以及识别效果. 数据处理利用图像处理技术我们手工大批量生成文字图像,一共360万 ...
不定长内存池之apr_pool
内存池可有效降低动态申请内存的次数,减少与内核态的交互,提升系统性能,减少内存碎片,增加内存空间使用率,避免内存泄漏的可能性,这么多的优点,没有理由不在系统中使用该技术. 内存池分类: 1. ...
三议(巧用:before和inline-block伪元素解决)跨浏览器不定长宽，中心为基点，百分比定位～...
ie6.ie7支持expression,虽然效率不高,但对于解决一些特别的css布局问题非常有用, 现代浏览器(chrome|firefox|opera|safari等)支持新的盒模型,以及一些非常有 ...
stm32串口空闲中断接收不定长数据
串口空闲中断接收不定长数据空闲中断是接受数据后出现一个byte的高电平(空闲)状态,就会触发空闲中断.并不是空闲就会一直中断,准确的说应该是上升沿(停止位)后一个byte,如果一直是低电平是不会触发 ...
chinese-ocr自然场景下不定长文字识别（ctpn + densenet）
chinese-ocr自然场景下不定长文字识别(ctpn + densenet) 注:本文中多处使用各位前辈的经验,项目代码不方便提供,可参考: https://github.com/YCG09/ch ...

设置不定长border-bottom

设置不定长border-bottom相关推荐

最新文章

热门文章