From 37d9434104476ce22b56c19ee6f86a270ee5ee29 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期二, 10 十月 2023 11:41:23 +0800
Subject: [PATCH] style: 列表组件行高调整
---
src/components/makepager/TableCommonView.vue | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 102 insertions(+), 8 deletions(-)
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 54c5b14..e3f0f26 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -25,6 +25,7 @@
:min-width="item.min"
show-overflow-tooltip
:sortable="item.sortable"
+ v-if="item.isShowColumn"
>
<template slot-scope="scope">
<span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
@@ -122,6 +123,21 @@
<el-empty description="鏆傛棤鏁版嵁"></el-empty>
</div>
</el-table>
+
+ <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
+ <div class="styleBtn">
+ <i @click="checkCol()" class="label">...</i>
+ <el-checkbox-group
+ v-model="showcol"
+ v-show="iscolopen"
+ class="checkbox-group"
+ @change="selectCheckBoxList"
+ >
+ <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item"
+ >{{ item }}
+ </el-checkbox>
+ </el-checkbox-group>
+ </div>
</div>
</template>
@@ -139,6 +155,8 @@
return {
selectBox: true,
tableInfomation: [], // 鎺ュ彛杩斿洖鏁版嵁
+ showcol: [],
+ allcol: [],
tableColumn: [
// table琛ㄥ崟
{ label: "", prop: "", min: 200, tooltip: true }
@@ -158,10 +176,30 @@
}
},
data() {
- return {}
+ return {
+ iscolopen: false,
+ showcol:[]
+ }
},
computed: {},
+ watch: {
+ 'tableList.showcol':{
+ handler(newVal){
+ this.showcol=newVal
+ },
+ immediate:true
+ }
+ },
methods: {
+ onMaskClick() {
+ this.iscolopen = false;
+ },
+ checkCol() {
+ this.iscolopen = !this.iscolopen;
+ },
+ selectCheckBoxList(val) {
+ this.$emit("selTableCol", val);
+ },
handleReserve(row) {
return row._id ? row._id : row.id
},
@@ -178,10 +216,16 @@
.querySelector(".el-table__footer")
var cell = current.rows[0].cells
for (let i = 0; i < this.showSummary.mergeNumber; i++) {
- cell[i].style.display = "none"
+ cell[i] && cell[i].style && (cell[i].style.display = "none")
}
- cell[this.showSummary.mergeNumber].classList.remove("is-left")
- cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString()
+ if (cell[this.showSummary.mergeNumber]){
+ if (cell[this.showSummary.mergeNumber].classList){
+ cell[this.showSummary.mergeNumber].classList.remove("is-left")
+ }
+ if (cell[this.showSummary.mergeNumber].colSpan){
+ cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString()
+ }
+ }
}
})
}
@@ -345,8 +389,8 @@
margin-left: -10px;
margin-right: -11px;
li {
- height: 57px;
- line-height: 57px;
+ //height: 57px;
+ //line-height: 57px;
.name-view {
padding-left: 10px;
border-bottom: 1px solid #ebeef5;
@@ -356,10 +400,14 @@
}
}
.no-product {
- height: 57px;
- line-height: 57px;
+ //height: 57px;
+ //line-height: 57px;
+ }
+ li:last-child .name-view{
+ border-bottom: none;
}
}
+
}
::v-deep {
.el-table__footer-wrapper {
@@ -398,4 +446,50 @@
height: 35px;
text-align: center;
}
+
+.overSpread1 {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: rgba(0, 0, 0, 0);
+ z-index: 10;
+}
+
+.styleBtn {
+ position: absolute;
+ width: 30px;
+ height: 36px;
+ // line-height: 26px;
+ // background: #06c062;
+ top: 0;
+ right: -6px;
+ z-index: 11;
+ .label {
+ position: absolute;
+ top: 6px;
+ font-size: 20px;
+ // line-height: 5px;
+ cursor: pointer;
+ color: #000;
+ transform: rotate(-90deg);
+ }
+ .checkbox-group {
+ width: 160px;
+ height: 330px;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ line-height: 25px;
+ background: #ffffff;
+ border-radius: 16px;
+ padding: 12px;
+ position: absolute;
+ right: 0;
+ top: 30px;
+ z-index: 99;
+ box-shadow: 0 0 2px 2px #f8f8f8;
+ }
+}
</style>
--
Gitblit v1.8.0