diff --git a/src/components/table/header/index.vue b/src/components/table/header/index.vue index e4a47de..de66860 100644 --- a/src/components/table/header/index.vue +++ b/src/components/table/header/index.vue @@ -1,32 +1,51 @@ @@ -45,15 +64,10 @@ const date = ref([ ]) interface Props { - // 默认展开 - showSelect?: boolean - showOperation?: boolean // 是否显示operation datePicker?: boolean } const props = withDefaults(defineProps(), { - showSelect: true, - showOperation: true, datePicker: false }) if (props.datePicker) { @@ -66,8 +80,16 @@ const resizeObserver = new ResizeObserver(entries => { handlerHeight() } }) +const showUnfoldButton = ref(false) onMounted(() => { - resizeObserver.observe(tableHeader.value) + nextTick(() => { + resizeObserver.observe(tableHeader.value) + const dom = document.getElementById('header-form') + console.log(dom.offsetHeight,'123123') + if (dom.offsetHeight > 50) { + showUnfoldButton.value = true + } + }) }) onUnmounted(() => { resizeObserver.disconnect() @@ -78,7 +100,7 @@ const handlerHeight = () => { tableStore.table.publicHeight + tableHeader.value.offsetHeight + (tableStore.showPage ? 58 : 0) + 20 ).height as string } -const showSelect = ref(props.showSelect) +const showSelect = ref(false) const showSelectChange = () => { showSelect.value = !showSelect.value nextTick(() => { @@ -124,41 +146,44 @@ const dateChange = () => { background-color: var(--ba-bg-color-overlay); border: 1px solid var(--ba-border-color); border-bottom: none; - padding: 13px 15px 0 15px; + padding: 13px 15px 20px 15px; font-size: 14px; - - .com-search-col { - display: flex; - align-items: center; - padding-top: 8px; - color: var(--el-text-color-regular); - font-size: 13px; +} +.table-com-search-form, +.table-com-search-form2 { + display: grid; + grid-gap: 20px; + grid-template-columns: repeat(5, 1fr); + :deep(.el-select), + :deep(.el-cascader), + :deep(.el-input) { + width: 100%; } - - .com-search-col-label { - width: 33.33%; - padding: 0 15px; - text-align: right; - overflow: hidden; - white-space: nowrap; + :deep(.el-form-item) { + max-width: 600px; + margin-right: 0; + margin-bottom: 0; } +} - .com-search-col-input { - padding: 0 15px; - width: 66.66%; +@media screen and (max-width: 2600px) { + .table-com-search-form { + grid-template-columns: repeat(4, 1fr); } - - .com-search-col-input-range { - display: flex; - align-items: center; - padding: 0 15px; - width: 66.66%; - - .range-separator { - padding: 0 5px; - } +} +@media screen and (max-width: 2000px) { + .table-com-search-form { + grid-template-columns: repeat(3, 1fr); } } +@media screen and (max-width: 1400px) { + .table-com-search-form { + grid-template-columns: repeat(2, 1fr); + } +} +.table-com-search-form2 { + grid-template-columns: repeat(auto-fit, 400px); +} .mlr-12 { margin-left: 12px; diff --git a/src/views/voltage/sags/operationsManagement/index.vue b/src/views/voltage/sags/operationsManagement/index.vue index 025bdd9..09986f6 100644 --- a/src/views/voltage/sags/operationsManagement/index.vue +++ b/src/views/voltage/sags/operationsManagement/index.vue @@ -1,6 +1,6 @@