项目中遇到的样式问题

scss 文件引入样式不生效

​ vue + sacc 项目, 公用样式 common.scss 样式嵌套写法导入不生效

现象：样式表只有最外层样式生效，嵌套样式不生效（没有解析嵌套语法）

下面这种方式导入，样式不能嵌套写。 必须使用 层级选择器方式

@import url('@/style/common.scss');

解决：

@import '@/style/common.scss';

element-ui 表格 宽度不随父级容器变化而自适应

页面布局方式为：父级 display: flex; 项目。自身宽高100%。

现象：初次加载没有问题，页面调整宽度时，不随父级宽度变化

<el-table
    :data="tableData"
    :cell-style="isRed"
    height="150"
    border
    style="width: 100%">
<el-table-column prop="id" label="设备编码" >
<el-table-column prop="id" label="设备编码" >
<el-table-column prop="id" label="设备编码" >
<el-table-column prop="id" label="设备编码" >

</el-table>

解决：

<el-table
  :data="tableData"
  height='calc(100%)' border fit>
  <el-table-column prop="td1" label="表头1"></el-table-column>
  <el-table-column prop="td1" label="表头2" ></el-table-column>
  <el-table-column prop="td1" label="表头3"></el-table-column>
  <el-table-column prop="td1" label="表头4" ></el-table-column>
  <el-table-column prop="td1" label="表头5" ></el-table-column>

</el-table>

element 表格中某列展示 图片，滚动条消失

解决

1. 删除height属性，添加height和overflow的样式

   style="height: calc(100%);overflow: auto;"

2. 现问题：头部固定失效，底线将一条数据隔断

   设置线样式清除

   /deep/.el-table::before{
      display: none;
   }

   el-table上设置相对定位，再将table的头部样式设置成sticky定位

   /deep/ .el-table__header-wrapper{
      position: sticky;
      top: 0;
      z-index: 1;
   }

   参考连接

• 本文作者： 王不留行
• 本文链接： https://wyf195075595.github.io/2022/07/23/programming/htmlcss/项目中遇到的样式问题/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！