From 16eb67ab6b103663d30cad9ba74360f982e131cb Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期二, 03 九月 2024 10:34:59 +0800
Subject: [PATCH] 自定义列显隐控制

---
 src/views/screen/components/select-item/index.vue |  204 +++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 199 insertions(+), 5 deletions(-)

diff --git a/src/views/screen/components/select-item/index.vue b/src/views/screen/components/select-item/index.vue
index f458ad6..f93947a 100644
--- a/src/views/screen/components/select-item/index.vue
+++ b/src/views/screen/components/select-item/index.vue
@@ -1,15 +1,209 @@
 <template>
   <div class="select-container">
-    
+    <div class="tabs-box">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane
+          v-for="item in testData1"
+          :label="item.name"
+          :name="item.value"
+        ></el-tab-pane>
+      </el-tabs>
+    </div>
+    <!-- <div class="type-select">
+      <div class="select-label">鏁版嵁婧�</div>
+      <el-select
+        v-model="typeValue"
+        popper-class="type-select"
+        class="select-style"
+        @change="setConfig"
+      >
+        <el-option
+          v-for="item in testData1"
+          :key="item.name"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </div> -->
+    <!-- <div class="local-select">
+      <div class="select-label">鍦板尯</div>
+      <el-select
+        v-model="localValue"
+        popper-class="type-select"
+        class="select-style"
+        @change="setConfig"
+      >
+        <el-option
+          v-for="item in testData2"
+          :key="item.name"
+          :label="item.name"
+          :value="item.value"
+        />
+      </el-select>
+    </div> -->
+    <div class="date-select">
+      <div class="select-label">鏃ユ湡</div>
+      <el-date-picker
+        v-model="dateValue"
+        type="daterange"
+        range-separator="鑷�"
+        start-placeholder="寮�濮嬫棩鏈�"
+        end-placeholder="缁撴潫鏃ユ湡"
+        value-format="yyyy-MM-dd"
+        @change="setConfig"
+      />
+    </div>
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+export default {
+  data() {
+    return {
+      typeValue: 1,
+      localValue: 1,
+      dateValue: new Date(),
+      activeName: 1,
+
+      testData1: [
+        {
+          name: "鐪佸巺鏁版嵁",
+          value: 1,
+        },
+        {
+          name: "甯傚眬鏁版嵁",
+          value: 2,
+        },
+        {
+          name: "鍏畨閮ㄦ暟鎹�",
+          value: 3,
+        },
+      ],
+      testData2: [
+        {
+          name: "瀵岄『鍘�",
+          value: 1,
+        },
+        {
+          name: "鑽ｅ幙",
+          value: 2,
+        },
+        {
+          name: "楂樻柊鍖�",
+          value: 3,
+        },
+        {
+          name: "鑷祦浜曞尯",
+          value: 4,
+        },
+        {
+          name: "璐′簳鍖�",
+          value: 5,
+        },
+        {
+          name: "澶у畨鍖�",
+          value: 6,
+        },
+        {
+          name: "娌挎哗鍖�",
+          value: 7,
+        },
+      ],
+    };
+  },
+  methods: {
+    setConfig() {},
+    handleClick() {},
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.select-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  .select-label {
+    font-size: 20px;
+    margin-right: 10px;
+    color: #2375f0;
+    flex-shrink: 0;
+  }
 
-</style>
\ No newline at end of file
+  .local-label {
+    font-size: 20px;
+    margin-right: 10px;
+    color: #2375f0;
+    flex-shrink: 0;
+  }
+
+  .type-select {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    width: 200px;
+  }
+
+  .local-select {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    width: 200px;
+  }
+
+  .date-select {
+    display: flex;
+    align-items: center;
+    width: 320px;
+    margin-top: -15px;
+  }
+}
+::v-deep .tabs-box {
+  margin-top: 5px;
+  width: 40%;
+  .el-tabs__item {
+    color: #ffffff !important;
+    font-size: 20px;
+  }
+  .is-active {
+    color: #66b5ff !important;
+    background: url("../../../../assets/images/screen/button1.png");
+    background-size: cover !important;
+    background-repeat: no-repeat !important;
+    background-position: center center !important;
+  }
+}
+::v-deep .el-input__inner {
+  background: rgba(67, 102, 155, 0.4) !important;
+  color: #4481dd;
+  border-color: #4481dd !important;
+}
+
+::v-deep .date-select .el-range-input {
+  background-color: transparent !important;
+  color: #4481dd;
+}
+::v-deep .date-select .el-date-editor .el-range-separator {
+  color: #4481dd !important;
+}
+// }
+/* 鍘绘帀tabs鏍囩鏍忎笅鐨勪笅鍒掔嚎 */
+::v-deep .el-tabs__nav-wrap::after {
+  position: static !important;
+  /* background-color: #fff; */
+}
+/* 涓嬪垝绾垮垏鎹㈤珮浜� */
+::v-deep .el-tabs__active-bar {
+  background-color: #4481dd;
+}
+::v-deep .el-tabs__item {
+  margin: 5px 30px;
+  padding: 0px 25px !important;
+  border-radius: 5px;
+  background: url("../../../../assets/images/screen/button.png");
+}
+</style>

--
Gitblit v1.8.0