From b76fd2fa93c2036d66e5142654cf66cf1e371531 Mon Sep 17 00:00:00 2001 From: 龚焕茏 <2842157468@qq.com> Date: 星期二, 30 四月 2024 17:12:34 +0800 Subject: [PATCH] 改为连表查询 --- src/views/screen/components/select-item/index.vue | 92 +++++++++++++++++++++++++++++++++++++++------ 1 files changed, 79 insertions(+), 13 deletions(-) diff --git a/src/views/screen/components/select-item/index.vue b/src/views/screen/components/select-item/index.vue index 3297ce7..75ee4bb 100644 --- a/src/views/screen/components/select-item/index.vue +++ b/src/views/screen/components/select-item/index.vue @@ -7,17 +7,17 @@ </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" - /> + <el-date-picker v-model="dateValue" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" value-format="yyyy-MM-dd" @change="setConfig" /> </div> </div> @@ -28,20 +28,51 @@ data() { return { typeValue: 1, + localValue: 1, dateValue: new Date(), testData1: [ { - name: '鐪佸巺', + name: '鐪佸巺鏁版嵁', value: 1 }, { - name: '甯傚巺', + name: '甯傚眬鏁版嵁', value: 2 }, { - name: '鍏畨閮�', + name: '鍏畨閮ㄦ暟鎹�', value: 3 } + ], + testData2: [ + { + name: '瀵岄『鍘�', + value: 1, + }, + { + name: '鑽e幙', + value: 2, + }, + { + name: '楂樻柊鍖�', + value: 3, + }, + { + name: '鑷祦浜曞尯', + value: 4, + }, + { + name: '璐′簳鍖�', + value: 5, + }, + { + name: '澶у畨鍖�', + value: 6, + }, + { + name: '娌挎哗鍖�', + value: 7, + }, ] } }, @@ -56,23 +87,58 @@ <style lang="scss" scoped> .select-container { position: absolute; - top: 30px; + top: 10px; left: 20px; display: flex; align-items: center; + .select-label { font-size: 20px; margin-right: 10px; color: #2375f0; + flex-shrink: 0; } + + .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; } } +::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; +} + + </style> \ No newline at end of file -- Gitblit v1.8.0