设置不定长border-bottom

qq_37483879

已于 2023-02-23 14:53:51 修改

阅读量316

点赞数

文章标签： css javascript html

于 2023-02-23 14:50:30 首次发布

本文链接：https://blog.csdn.net/qq_37483879/article/details/129181099

版权

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