From fd34c3c56e2d40c312fcbbf7330d40ceafcd421e Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期四, 28 九月 2023 09:34:46 +0800
Subject: [PATCH] feat: 表格组件添加列显隐控制组件;销售线索页表格适配列显隐
---
src/components/makepager/TableCommonView.vue | 86 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 85 insertions(+), 1 deletions(-)
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 54c5b14..124fc97 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
},
@@ -398,4 +436,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: 2px;
+ z-index: 9999;
+ .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