说明

以下是基于element-ui的部分组件

版本："element-ui": "^2.15.10"

el-table

表格居中的样式穿透

/*
  el-table样式穿透 表格居中
*/
/deep/ .el-table th > .cell {
    text-align: center;
}

/deep/ .el-table .cell {
    text-align: center;
}

el-input

输入框内边距穿透

/*输入框*/
/deep/ .title-input .el-input__inner {
    padding: 0;
}

未穿透前,输入框的内边距相对于整个输入框的长度来说太大,如下图所示

因此需要穿透,将内边距设置为0,此时可完整显示输入框内容,如下图所示

el-select

下拉框样式穿透,显示的字体颜色

/*下拉框显示的文字*/
/deep/ .red-select .el-input__inner {
    font-weight: bold; /* 修改文字粗细*/
    color: red; /* 修改文字颜色 在el-select上添加 class="red.select" 即可生效*/
}

/deep/ .green-select .el-input__inner {
    font-weight: bold; /* 修改文字粗细*/
    color: green; /* 修改文字颜色*/
}

/deep/ .yellow-select .el-input__inner {
    font-weight: bold; /* 修改文字粗细*/
    color: yellowgreen; /* 修改文字颜色*/
}

使用

<el-select v-model.number="row.stroke_code" :class="showStyle(row.stroke_code)" size="mini" placeholder="请选择">
  <el-option
    v-for="item in travelCodeList"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :class="showColor(item.value)"
  />
</el-select>

此处做了样式绑定,根据不同的值,显示不同的颜色

// 样式计算
showStyle()
{
  return (code) => {
    return code === 2 ? 'green-select' : code === 1 ? 'yellow-select' : 'red-select'
  }
}

此时,该处的下拉框显示的文字颜色为红色,如下图所示(所有效果)

由图可知,在el-select上添加class="red-select"或者其他颜色的class即可生效

最右边的是未加class的下拉框,可见其文字颜色为黑色,即默认状态的颜色

下拉选项的颜色

下拉选项的颜色并不需要穿透,只需要在el-option上添加样式即可

<el-select v-model.number="row.stroke_code" size="mini" placeholder="请选择">
  <el-option
    v-for="item in travelCodeList"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :class="showColor(item.value)"
  />
</el-select>

代码中的class="showColor(item.value)"是为了动态显示下拉选项的颜色

// 各种码的颜色的样式计算
showColor()
{
  return (code) => {
    return code === 2 ? 'green' : code === 1 ? 'yellow' : 'red'
  }
}

其效果如下图所示

antd-table

有些情况下我们需要改变table的样式,比如说表格的边框,表头的背景色等等

表格边框

首先设置表格的基本属性

<Table
  rowClassName="editable-row"
  columns={customerDeliveryInformationTableColumn}
  dataSource={data}
  scroll={{ x: true }}
>
</Table>

初初始样式如下

现在我们需要取消表头的边框以及标题之间的边框,因此需要自定义样式

// table表头
& .ant-table-thead > tr > th {
  // 表头的背景色
  background-color: transparent;
  color: #4d4d4d;

  &::before {
    // 表头的左边框
    width: 0 !important;
  }
}

现在我们设置行的样式:

  // table表头取消边框
& .ant-table-thead > tr > th {
  border: none;
  border-inline-end: none !important;
  background-color: white;
}

& .editable-row > td {
  border: 1px solid #c7d9ea !important;
}

// table开启多选时 选中行的背景色
:where(.css-dev-only-do-not-override-108bl21).ant-table-wrapper .ant-table-tbody .ant-table-row.ant-table-row-selected >.ant-table-cell {
    background-color: #ddf2f5 !important;
}

滚动条样式

  /* 自定义滚动条样式 */
::-webkit-scrollbar {
    height: 7px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* 背景颜色 */
}

::-webkit-scrollbar-thumb {
    margin-top: 5px;
    border-radius: 10px;
    background: #ffd90e; /* 滚动条颜色 */
}

::-webkit-scrollbar-thumb:hover {
    background: #ffd90e; /* 鼠标悬停时的颜色 */
    border-radius: 10px;
}

/* 火狐浏览器 */
* {
    scrollbar-width: auto; /* 滚动条宽度 */
    scrollbar-color: #ffd90e #f1f1f1; /* 滚动条颜色和背景颜色 */
}