Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

headerdom操作

Browse Source
This commit is contained in:
仲么了
2024-01-05 10:02:18 +08:00
parent 2f9a6cd260
commit 3fea14129e
1 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/table/header/index.vue
View File

@@ -2,8 +2,13 @@
<div ref="tableHeader" class="cn-table-header">
<!-- 通用搜索 -->
<transition name="el-zoom-in-bottom" mode="out-in">
<div class="table-com-search" v-show="showSelect">
<div id="table-com-search1" class="table-com-search" v-show="showSelect">
</div>
</transition>
<div class="table-header ba-scroll-style">
<div id="table-com-search2" style="flex: 1; height: 32px; overflow: hidden; margin-right: 20px">
<el-form
id="header-form"
@submit.prevent=""
@keyup.enter="onComSearch"
label-position="left"
@@ -11,31 +16,10 @@
class="table-com-search-form"
:label-width="90"
>
<el-form-item label="日期" v-if="datePicker">
<DatePicker fef="Picker"></DatePicker>
</el-form-item>
<slot name="select"></slot>
</el-form>
</div>
</transition>
<div class="table-header ba-scroll-style">
<div style="flex: 1; height: 32px; overflow: hidden">
<el-form
v-show="!showSelect"
id="header-form"
@submit.prevent=""
@keyup.enter="onComSearch"
label-position="left"
:inline="true"
class="table-com-search-form2"
:label-width="100"
>
<slot name="select"></slot>
<el-form-item label="日期" v-if="datePicker">
<el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
<DatePicker ref="Picker"></DatePicker>
</el-form-item>
<slot name="select"></slot>
</el-form>
</div>
<template v-if="$slots.select">
@@ -89,8 +73,7 @@ onMounted(() => {
tableStore.table.params.searchEndTime = Picker.value.timeValue[1]
nextTick(() => {
resizeObserver.observe(tableHeader.value)
const dom = document.getElementById('header-form')
console.log(dom.offsetHeight, '123123')
const dom = document.getElementById('header-form') as HTMLElement
if (dom.offsetHeight > 50) {
showUnfoldButton.value = true
}
@@ -108,9 +91,15 @@ const handlerHeight = () => {
const showSelect = ref(false)
const showSelectChange = () => {
showSelect.value = !showSelect.value
nextTick(() => {
handlerHeight()
})
// 把dom(id=header-form)插入到table-com-search1或者table-com-search2
const dom = document.getElementById('header-form') as HTMLElement
if (showSelect.value) {
const dom1 = document.getElementById('table-com-search1') as HTMLElement
dom1.appendChild(dom)
}else{
const dom2 = document.getElementById('table-com-search2') as HTMLElement
dom2.appendChild(dom)
}
}
const onComSearch = async () => {
console.log('时间1233123')
@@ -190,7 +179,7 @@ const dateChange = () => {
grid-template-columns: repeat(2, 1fr);
}
}
.table-com-search-form2 {
.table-header .table-com-search-form2 {
grid-template-columns: repeat(auto-fit, 400px);
}