vue 自定义的通用的表格组件（使用div）
vue 自定义的通用的表格组件（使用div）
做项目的时候由于传统的table及elementUI的el-table的tr和td没办法设置间距，满足不了UI提供的设计稿，为了还原，自己封装了该组件
该表格组件的特点
- 表头排序功能：支持点击表头进行升序、降序排序，并显示相应的排序图标。
- 复选框功能：可以在表格中为每一行数据添加复选框，并支持全选和取消全选操作。
- 图表展示：支持在表格中展示图表数据，提供相应的图表显示和交互功能。
- 文件上传功能：对于特定的列，支持文件上传和编辑操作，并可以显示上传进度和状态。
- 按钮操作：支持在表格中添加按钮并绑定相应的点击事件，实现自定义的操作功能（可以动态控制按钮的显示和禁用状态）。
- 支持单元格内容的格式化显示
- 行点击事件：支持点击表格某一行触发相应的事件处理。
- 包含了滚动条联动的功能，右侧侧固定列和表格内容的联动滚动
该表格组件的介绍
封装组件具体用了vue哪些指令
-
条件渲染
- 使用了 v-if 指令来根据条件判断是否渲染整个表格容器。
样式类绑定：
- 使用了 v-if 指令来根据条件判断是否渲染整个表格容器。
-
样式类绑定
- 使用了 :class 绑定动态的样式类。。
-
表头渲染：
- 使用了 v-for 指令循环渲染表头的每一列。
- 对每一列进行了样式设定，并且设置了点击事件处理函数。
-
表格内容渲染：
- 使用了 v-for 指令循环渲染表格的每一行和每一列。
- 对每个单元格进行了样式设定，并且设置了点击事件处理函数。
-
固定列：
- 在表格右侧实现了固定列的功能，并根据条件判断是否渲染固定列的内容。
-
事件处理：
- 使用了 @click 绑定点击事件处理函数。
- 使用了 @change 监听复选框的变化事件。
-
插槽：
- 使用了 slot 标签定义插槽，用于插入其他组件或内容。
表头部分
这部分代码负责渲染表格的表头结构，包括表头的各个列以及相关的操作按钮、排序功能等
<div class="common-table-header">
......
div>
表格内容
这部分代码负责根据数据 data 动态渲染表格的行和列内容，包括每一行中的单元格内容、操作按钮、上传编辑功能等。
<div v-for="(row, index) in data">
......
div>
类名介绍
- common-table-body — 表格内容的盒子（除表头外）高度需固定（固定原因：表格滚动条）
- common-table-body-wrapper — 表格内容的盒子（除表头外）高度自适应
- common-table-row — 每一行的类名
固定列部分
<div class="common-table-box-fixed">
......
div>
传参介绍
- data — 表格显示的数据
- columns — 表格列字段
- 传参格式
- label对应value
- label2对应value1 — 这块后加的，value2被占用所以没对上可自行更改
- label3对应value3
- 传参格式
[{
label: '表头名称',
value: "对应列内容的字段名",
width: '表格列的宽度 --- 此处都是转化为vw以便自适应',
paddingLeft: '每一列的左内边距默认都为20',
paddingRight: '每一列的右内边距默认都为20',
isSort: '是否是索引',
position: "文字是位置-- center:居中；center-left:居左",
valueFormatter: "单元格内容的格式化显示---方法 --- 解析value",
valueFormatter1: "单元格内容的格式化显示---方法--- 解析value1",
valueFormatter3: "单元格内容的格式化显示---方法 --- 解析value3 ",
isHidden: '隐藏列',
isDate: '日期格式 --- 日期有特殊样式显示',
label2: '表头名称 --- 表格显示过多时一列支持显示1-3个字段，举例：表头名为姓名/性别/电话',
value1: '对应列内容的字段名 --- 表格显示过多时一列支持显示1-3个字段，举例：姓名/性别/电话竖着展示',
label3: '表头名称 --- 表格显示过多时一列支持显示1-3个字段，举例：表头名为姓名/性别/电话',
value3: '对应列内容的字段名 --- 表格显示过多时一列支持显示1-3个字段，举例：姓名/性别/电话竖着展示',
isTooltip: 是否超出显示提示框 --- value内容,
isTooltip1: 是否超出显示提示框 --- value1内容,
isTooltip2: 是否超出显示提示框 --- value3内容,
value2: '表格值显示。一般显示名称后value2用来拼接到value后的',
wordColor: '表格内容样色，默认为黑色，当该值为true则为灰色',
isCommonProgress: '显示进度条',
wrap: '通常用在操作列，按钮是否可以换行',
isButton: '代表渲染按钮',
buttonList: '按钮集合',
fontColorIsBlue: '文字颜色变为蓝色',
isbadge: '内容右上角显示的标记此处为数量',
isProgressVal: '进度，这块显示两行，上边为具体值，下册为百分比进度',
unit: '表格内容如果需要单位且不用valueFormatter，可直接使用该值进行传递',
isEcharts: '需要绘制echarts',
isImg: '代表需要展示图片',
question: '表头显示提示框解释该字段表格含义',
isClick: '表格可以点击需结合callback进行使用，只有点击每一列生效',
callback: '方法，点击表格某行后执行',
bgFormatter: '方法，根据某个值给表格行添加背景'
}]
- 举例
tableColumns = [
{
label: "序号",
value: "sort",
width: this.windowWidth <= 1024 ? 70 * 2 : 78 * 2,
paddingLeft: this.windowWidth <= 1024 ? 10 * 2 : 20 * 2,
paddingRight: this.windowWidth <= 1024 ? 10 * 2 : 20 * 2,
isSort: true,
position: "center"
},
{
label: "创建日期",
value: "createTime",
isDate: true,
width: this.windowWidth <= 1024 ? 140 * 2 : 148 * 2,
position1: "center-left",
valueFormatter: this.valueDateFormat,
paddingLeft: 0,
paddingRight: 0,
isHidden: this.windowWidth <= 1024
},
{
label: "类型",
value: "type",
width: this.windowWidth <= 1024 ? 85 * 2 : 107 * 2,
position: "center",
valueFormatter: this.valueSourceFormat,
paddingLeft: this.windowWidth <= 1024 ? 10 * 2 : 20 * 2,
paddingRight: this.windowWidth <= 1024 ? 10 * 2 : 20 * 2
},
];
- isJump
- 点击表格任意行及任意位置都能触发
- isChoose
- 支持选中某一行
- needJudgeChooseStatus
- false-任意选；true-需要满足某些条件才能被选
- buttonList
- 固定操作列按钮集合
- fixedWidth
- 固定操作列宽
- fixedLabel
- 固定操作表头的label
- rowId
- 选中某一行时判断是否重复选择的属性key
- isScroll
- 是否支持滚动表格后才加载某些内容
- checkDisabledLabel
- 表格多选框是否禁用要判断的属性key
- titleCheck
- 表格表头多选框的绑定值
- titleChekcDisabled
- 表格表头多选框是否禁用
- chooseNumber
- 选中表格行最多支持的数量
- chooseTooltip
- 选中表格行等于支持的数量后再选的提示
方法介绍
- handleClickSort(handleSortDown,handleSortUp)
- 表格的列头点击时触发排序操作，调用 $emit 方法来触发排序事件，并将排序方式和排序字段作为参数传递给父组件，供其进行相应的处理。
- handleChangeCheck
- 调用 $emit 方法触发勾选事件，将当前行的row作为参数传递给父组件
- handleChangeCheckAll
- 代表全选当前页 - 调用 $emit 方法触发勾选事件传递给父组件
- progressoFormat
- 用于格式化进度条的显示文本。该方法接收两个参数：percentage 表示进度百分比，status 表示进度状态
- handleAvatarSuccess
上传文件调用的方法
- res-表示上传成功的响应对象
- index-表示索引值
- row 表示行信息。
- beforeAvatarUpload
上传文件判断文件类型和大小，根据条件决定是否压缩文件，并将结果返回给上传组件。同时，也会触发上传事件，并将索引值传递给父组件。
- getFontColorIsBlue（getFontColorIsBlue1，getFontColorIsBlue2）
- 判断是否给表格某列的添加类名，对文字颜色进行改变
- getColumnValue（getColumnValue1，getColumnValue3）
- 用来格式化内容
- getColumnBg
- 判断是否给该行添加背景类名
- getColumnClass（getColumnClass1，getColumnClass2）
- 判断是否给该行添加文字类名
- getWidth
- 设置每一列宽度
- getPadding
- 设置每一列内间距
- getButtonDisabled
- 判断按钮是否禁用
- getButtonDisplay
- 判断按钮是否隐藏显示
- handleJudgeOperate
- 判断该列是否隐藏显示
- handleListenerScroll
- 表格滚动事件
- combinedScroll
- 右侧侧固定列和表格内容的联动滚动
- handleClickRow
- 点击某一行
- clearChooseData
- 清除选中的内容
完整代码
commonTable.vue
上传编辑
查看编辑
![]()
{{ getColumnValue(column, row) }}
{{ fixedLabel }}
- chart：详见该篇文章vue elementUI el-select的封装vue 封装echarts
- commonTooltip：详见该篇文章Vue tooltip 组件封装
index.scss
.h-common-table-container {
position: relative;
height: calc(100% - 3.125vw);
display: flex;
flex-direction: column;
.common-table-box {
background-color: transparent;
border-radius: 0;
border: none;
@include font_color("themeColor");
font-size: vw(14 * 2);
margin-bottom: vh(40 * 2);
height: 100%;
width: 100%;
overflow-y: hidden;
overflow-x: auto;
padding-bottom: vh(6 * 2);
&.common-table-box-min {
height: vh(288 * 2);
padding-bottom: 0;
margin-bottom: 0;
}
&.common-table-box-min-height {
height: vh(322 * 2);
padding-bottom: 0;
margin-bottom: 0;
}
&::-webkit-scrollbar {
width: vw(6 * 2);
height: vw(6 * 2);
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb {
background-color: #dfdfdf;
border-radius: vw(3 * 2);
}
&::-webkit-scrollbar-track {
background: #fff;
border-radius: vw(3 * 2);
}
.common-table-box-wrapper {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.common-table-header {
height: vh(25 * 2);
display: flex;
margin-bottom: vh(20 * 2);
font-size: vw(18 * 2);
color: #000;
font-weight: 500;
div {
height: 100%;
text-align: center;
flex-shrink: 0;
padding-left: vw(20 * 2);
&.no-padding {
padding-left: 0;
}
&.padding-right {
padding-right: vw(50 * 2) !important;
}
&.column-flex {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
&.column-date {
padding-left: vw(35 * 2) !important;
}
.sort-box {
display: inline-flex;
flex-direction: column;
padding-left: 0;
align-items: center;
justify-content: center;
span {
width: vw(12 * 2);
margin-bottom: vh(1 * 2);
cursor: pointer;
// height: vw(8*2);
display: flex;
align-items: center;
justify-content: center;
&:last-child {
margin-bottom: 0;
}
img {
width: 100%;
height: 100%;
}
}
}
.el-checkbox {
width: fit-content;
padding: 0 vw(20 * 2);
display: inline-flex;
align-items: center;
height: 100%;
font-size: vw(12 * 2);
margin-right: 0;
.el-checkbox__label {
font-size: vw(12 * 2);
padding-left: vw(13 * 2);
@include font_color("themeColor");
display: flex;
align-items: center;
height: 100%;
}
.el-checkbox__input {
display: inline-flex;
align-items: center;
justify-content: center;
&.is-checked {
.el-checkbox__inner {
background: url("~@/assets/img/checkedImg.png");
@include checkBox-style(vw(16 * 2));
border: vh(1 * 2) solid #007cdb;
}
+ .el-checkbox__label {
@include font_color("themeColor");
}
}
&.is-indeterminate {
.el-checkbox__inner {
background: url("~@/assets/img/checkedImg.png");
@include checkBox-style(vw(16 * 2));
border: vh(1 * 2) solid #007cdb;
}
}
&.is-disabled {
.el-checkbox__inner {
background: none;
background-color: rgba(192, 196, 204, 0.5);
@include checkBox-style(vw(16 * 2));
border: vh(1 * 2) solid #c0c4cc;
box-sizing: border-box;
}
}
.el-checkbox__inner {
background: url("~@/assets/img/noCheckImg.png");
@include checkBox-same-style(vw(16 * 2));
}
}
}
.column-label-another {
color: #797979;
}
}
}
.common-table-body {
flex: 1;
width: 100%;
&.common-table-body-min {
height: vh(262 * 2);
}
&.common-table-body-min-height {
height: min_vh(262 * 2) !important;
}
.common-table-body-wrapper {
height: fit-content;
padding-right: vw(36 * 2);
&.common-table-body-wrapper-no-padding {
padding-right: 0;
}
&.common-table-body-wrapper-min-padding {
padding-right: vw(20 * 2);
}
}
.common-table-row {
display: flex;
background: #fff;
margin-bottom: vh(20 * 2);
height: vh(100 * 2);
border-radius: vw(10 * 2);
position: relative;
box-sizing: border-box;
font-size: vw(18 * 2);
&.common-table-row-choose {
cursor: pointer;
}
&.row-border-green {
&:before {
width: vw(10 * 2);
height: 100%;
content: "";
@include background_color("alarmGreenBgColor");
border-radius: vw(10 * 2) 0 0 vw(10 * 2);
position: absolute;
left: 0;
}
}
&.row-border-yellow {
&:before {
width: vw(10 * 2);
height: 100%;
content: "";
@include background_color("alarmYellowBgColor");
border-radius: vw(10 * 2) 0 0 vw(10 * 2);
position: absolute;
left: 0;
}
}
&.row-border-orange {
&:before {
width: vw(10 * 2);
height: 100%;
content: "";
@include background_color("alarmHappenBgColor");
border-radius: vw(10 * 2) 0 0 vw(10 * 2);
position: absolute;
left: 0;
}
}
&.row-border-red {
border-color: #ff4949 !important;
}
&.row-border-warning-red {
border: vh(2 * 2) solid #ff452f !important;
}
&.row-is-active {
border: vh(2 * 2) solid #71807b;
&:before {
width: vw(10 * 2);
height: 100%;
content: "";
background: #808c87;
border-radius: vw(10 * 2) 0 0 vw(10 * 2);
position: absolute;
left: 0;
}
}
&.common-table-row-min-height {
height: vh(50 * 2);
}
.button-flex-box {
height: 100%;
position: relative;
width: 100%;
border-left: none !important;
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: flex-end;
&.button-flex-box-padding {
padding-right: 0;
&.button-flex-box-wrap {
// flex-wrap: wrap;
flex-direction: column;
align-items: flex-end;
}
}
&.button-flex-box-wrap {
// flex-wrap: wrap;
flex-direction: column;
align-items: flex-end;
.button-Box-height {
height: vh(32 * 2);
+ .button-Box-height {
margin-left: 0;
}
&:first-child {
margin-bottom: vh(10 * 2);
}
&:last-child {
margin-bottom: vh(0 * 2);
}
.el-button {
width: vw(82 * 2);
height: vh(32 * 2);
+ .el-button {
margin-left: vw(10 * 2);
}
}
}
}
&.button-flex-box-small {
align-items: center;
.button-Box-height {
height: vh(32 * 2);
+ .button-Box-height {
margin-left: 0;
}
.el-button {
width: vw(82 * 2);
height: vh(32 * 2);
+ .el-button {
margin-left: vw(10 * 2);
}
}
}
}
&.one {
.button-Box-height {
min-width: min_vw(112 * 2);
.el-upload {
margin: 0;
}
}
}
.el-button {
width: vw(112 * 2);
height: vh(42 * 2);
border-radius: vw(21 * 2);
font-size: vw(20 * 2);
border: none;
outline: none;
span {
height: vh(24 * 2);
display: inline-flex;
align-items: center;
}
&.el-button--primary {
@include background_color("confirmButtonBgColor");
}
&.el-button--info {
@include background_color("infobtnBgColor");
}
&.el-button--success {
@include background_color("confirmButtonBgColor");
}
&.el-button--danger {
@include background_color("dangerbtnBgColor");
}
+ .el-button {
margin-left: vw(20 * 2);
}
}
}
.button-Box {
height: vh(42 * 2);
display: flex;
justify-content: flex-end;
margin-bottom: 0;
+ .button-Box {
margin-left: vw(20 * 2);
&.file-button-box {
margin-left: vw(20 * 2);
.el-button {
margin-left: 0;
}
}
// .el-button {
// margin-left: vw(20 * 2);
// }
margin-bottom: 0;
}
&.button-Box-height {
height: vh(42 * 2);
.el-button {
height: vh(42 * 2);
width: vw(112 * 2);
padding: 0;
&.button-four {
width: vw(112 * 2);
}
}
}
.el-button {
flex-shrink: 0;
border: none;
}
}
.cell-box {
padding: vh(10 * 2) vw(20 * 2);
flex-shrink: 0;
&.cell-padding {
padding: vh(20 * 2) vw(20 * 2);
}
&.cell-padding-min {
padding-top: vh(13 * 2);
padding-bottom: vh(13 * 2);
}
&.cell-padding-no-top {
padding: vw(8 * 2) vw(20 * 2);
}
&.has-border {
position: relative;
&:before {
content: "";
width: vw(1 * 2);
height: vh(21 * 2);
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
@include background_color("borderColor");
}
}
&.word-center {
display: flex;
align-items: center;
justify-content: center;
}
&.word-center-left {
display: flex;
align-items: center;
}
&.word-center-right {
display: flex;
align-items: center;
span {
text-align: right;
}
}
&.button-center-right {
justify-content: flex-end;
}
&.chart-padding {
padding: vw(6 * 2) vw(20 * 2);
}
.row-label {
width: 100%;
div {
&.one-line {
font-size: vw(18 * 2);
@include text-overflow-two;
.none-label {
width: fit-content;
white-space: nowrap;
}
span {
@include text-overflow-two;
}
}
&.no-warp {
font-size: vw(16 * 2);
@include text-overflow;
span {
@include text-overflow;
width: 100%;
display: inline-block;
}
}
&.two-line {
font-size: vw(18 * 2);
margin-top: vh(10 * 2);
color: #797979;
height: vh(25*2);
@include text-overflow;
&.two-line-mt {
margin-top: vh(7 * 2);
}
&.two-line-mts {
margin-top: vh(5 * 2);
}
.none-label {
width: fit-content;
white-space: nowrap;
}
span {
width: 100%;
display: inline-block;
@include text-overflow;
}
}
&.word-bold {
font-family: "PingFangSC-Semibold";
}
&.word-red {
color: #ff452f;
}
&.word-blue {
color: #2b5ae8;
}
&.row-label-bg {
width: vw(45 * 2);
height: vh(20 * 2);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: vw(10 * 2);
&.row-label-green {
@include background_color("alarmMsgBgColor");
}
&.row-label-yellow {
@include background_color("alarmYellowBgColor");
}
&.row-label-orange {
@include background_color("alarmRedBgColor");
}
&.row-label-gray {
@include background_color("pageBoxBgColor");
}
}
&.word-bold {
font-family: "PingFangSC-Semibold";
}
&.progress-box {
width: 100%;
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
align-items: center;
.device-num {
width: 100%;
color: #000;
text-align: center;
font-size: vw(16 * 2);
margin-bottom: vh(6 * 2);
}
.progress {
width: vw(82 * 2);
height: vh(32 * 2);
position: relative;
border-radius: vw(21 * 2);
background: #b5c0bc;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.progress-color {
position: absolute;
left: 0;
height: 100%;
top: 0;
background: #2b5ae8;
}
.val {
font-size: vw(18 * 2);
color: #ffffff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
}
}
&.common-progress-box {
display: flex;
align-items: center;
justify-content: center;
height: vh(50*2);
background: #EEF0EF;
border-radius: vw(5*2);
position: relative;
overflow: hidden;
.progress-bg-color {
position: absolute;
left: 0;
height: 100%;
top: 0;
background: #B5C0BC;
}
.val {
font-size: vw(18 * 2);
color: #000;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: fit-content;
height: fit-content;
}
}
img {
width: vw(22 * 2);
height: vw(22 * 2);
object-fit: contain;
display: block;
}
}
.el-checkbox {
width: fit-content;
padding: 0 vw(20 * 2);
display: inline-flex;
align-items: center;
height: 100%;
font-size: vw(12 * 2);
margin-right: 0;
.el-checkbox__label {
font-size: vw(12 * 2);
padding-left: vw(13 * 2);
@include font_color("themeColor");
display: flex;
align-items: center;
height: 100%;
}
.el-checkbox__input {
display: inline-flex;
align-items: center;
justify-content: center;
&.is-checked {
.el-checkbox__inner {
background: url("~@/assets/img/checkedImg.png");
@include checkBox-style(vw(16 * 2));
border: vh(1 * 2) solid #007cdb;
}
+ .el-checkbox__label {
@include font_color("themeColor");
}
}
&.is-indeterminate {
.el-checkbox__inner {
background: url("~@/assets/img/checkedImg.png");
@include checkBox-style(vw(16 * 2));
border: vh(1 * 2) solid #007cdb;
}
}
&.is-disabled {
.el-checkbox__inner {
background: none;
background-color: rgba(192, 196, 204, 0.5);
@include checkBox-style(vw(16 * 2));
border: vh(1 * 2) solid #c0c4cc;
}
}
.el-checkbox__inner {
background: url("~@/assets/img/noCheckImg.png");
@include checkBox-same-style(vw(16 * 2));
}
}
}
&.row-label-date {
width: 100%;
height: vh(36 * 2);
border-radius: vw(21 * 2);
border: vh(1 * 2) solid #797979;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: vw(18 * 2);
color: #797979;
}
.row-label-color {
color: #797979;
}
.row-label-color-default {
color: #000000 !important;
}
.word-font-default {
font-size: vw(18*2) !important;
}
.row-label-num-style {
width: vw(80 * 2);
height: vh(36 * 2);
background: #808c87;
border-radius: vw(21 * 2);
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: vw(24 * 2) !important;
color: #fff;
&-bg {
background: #ff452f;
}
}
.row-label-circle {
width: vw(60 * 2);
height: vw(60 * 2);
background: #808c87;
border-radius: 50%;
color: #fff;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: vw(16 * 2) !important;
}
}
.table-chart {
@include background_color("pageBoxBgColor");
width: 100% !important;
height: vh(40 * 2) !important;
padding: 0 vw(15 * 2);
border-radius: vw(10 * 2);
section {
position: absolute !important;
.loading {
display: flex;
align-items: center;
justify-content: center;
}
.desc {
display: none;
}
}
}
.echarts-top {
position: absolute !important;
@include background_color("pageBoxBgColor");
width: 100% !important;
height: vh(40 * 2) !important;
padding: 0 vw(15 * 2);
border-radius: vw(10 * 2);
z-index: 99;
section {
position: absolute !important;
.loading {
display: flex;
align-items: center;
justify-content: center;
}
.desc {
display: none;
}
}
}
.el-badge {
width: 100%;
position: relative;
.el-badge__content {
position: absolute;
width: vw(17 * 2);
height: vw(17 * 2);
border-radius: 50%;
background-color: #ff452f;
top: vw(-17 * 2);
right: 0;
transform: none;
font-size: vw(12 * 2);
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}
}
.common-table-box-fixed {
position: absolute;
right: vw(36 * 2);
top: 0;
z-index: 100;
height: vh(830 * 2);
padding-bottom: vh(6 * 2);
.common-table-fixed-header {
height: vh(17 * 2);
display: flex;
margin-bottom: vh(10 * 2);
align-items: center;
justify-content: flex-end;
padding-right: vw(50 * 2);
@include background_color("pageBoxBgColor");
font-family: "PingFangSC-Semibold";
}
.common-table-fixed-box {
height: vh(800 * 2);
overflow-x: hidden;
overflow-y: auto;
border-radius: 0 vw(10 * 2) vw(10 * 2) 0;
// @include background_color('bottomBoxBgColor');
&::-webkit-scrollbar {
display: none;
}
}
.common-table-fixed-wrapper {
height: fit-content;
.common-table-fixed-header-body {
padding-top: 0;
height: vh(55 * 2);
position: relative;
padding-right: vw(40 * 2);
margin-bottom: vh(10 * 2);
@include background_color("bottomBoxBgColor");
@include border_style("borderColor");
border-left: none !important;
border-radius: 0 vw(10 * 2) vw(10 * 2) 0;
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: flex-end;
&.common-table-fixed-row-choose {
cursor: pointer;
}
&.fixed-is-active {
@include background-color("confirmButtonBgColor");
@include border_style("confirmButtonBgColor");
.button-Box {
.el-button {
@include border_style("borderColor");
border-color: #fff !important;
}
}
}
// .spance-bg {
// width: 100%;
// height: vh(10*2);
// // @include background_color('pageBoxBgColor');
// }
.button-Box {
height: vh(20 * 2);
display: flex;
justify-content: flex-end;
margin-bottom: 0;
+ .button-Box {
&.file-button-box {
margin-left: vw(10 * 2);
.el-button {
margin-left: 0;
}
}
.el-button {
margin-left: vw(10 * 2);
}
margin-bottom: 0;
}
&.button-Box-height {
height: vh(24 * 2);
.el-button {
height: vh(24 * 2);
width: vw(45 * 2);
padding: 0;
&.button-four {
width: vw(70 * 2);
}
}
}
.el-button {
border: none;
}
}
&:before {
display: none;
content: "";
width: vw(1 * 2);
height: vh(21 * 2);
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
@include background_color("borderColor");
}
}
}
}
}
- 上述样式单位如果想改为px
- 可以将vw(162) 、vh(162)这种的改为16px;
- 如果觉得改vw vh很麻烦可以使用下列函数放入你的文件中
@function vw($px) {
// 进行计算操作
$result: ($px / 2);
$factor: 100000;
$roundedValue: round($result * $factor);
$roundedResult: $roundedValue / $factor;
@return #{$result}px;
}
@function vh($px) {
$result: ($px / 2);
$factor: 100000;
$roundedValue: round($result * $factor);
$roundedResult: $roundedValue / $factor;
@return #{$result}px;
}
- 使用vw和vh 我这边是统一将宽高都设备2倍，然后页面整体缩放了
- 页面缩放：详见该篇文章vue 响应式transform
//默认设计稿的宽度
$designWidth: 3840;
//默认设计稿的高度
$designHeight: 2160;
//px转为vw的函数
@function vw($px) {
// 进行计算操作
$result: ($px / $designWidth * 2) * 100;
$factor: 100000;
$roundedValue: round($result * $factor);
$roundedResult: $roundedValue / $factor;
@return #{$roundedResult}vw;
}
//px转为vh的函数
@function vh($px) {
$result: ($px / $designHeight * 2) * 100;
$factor: 100000;
$roundedValue: round($result * $factor);
$roundedResult: $roundedValue / $factor;
@return #{$roundedResult}vh;
}
index.scss具体引用：详见该篇文章Vue项目切换主题颜色（mixin + scss)
vue文件引用table组件