vxe-table两个table做自定义筛选

最新推荐文章于 2024-08-01 23:58:16 发布

Lella

最新推荐文章于 2024-08-01 23:58:16 发布

阅读量465

点赞数 6

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Lella/article/details/139319615

版权

场景是这样的，页面有两个vxe-table，第二个vxe-table没有表头，然后第二个vxe-table筛选需要根据第一个vxe-table的表头进行展示，看了vxe的API没有找到合适的方法就自己对表头进行重写了


<vxe-column
				
				align="center"
				title="关联类型"
				field="compareType"
				width="60px"
			>
				<template #header>
					<div>
						<span>关联类型 </span>
						<el-popover
							ref="popover"
							popper-class="compare-pover"
							placeholder="bottom"
							v-model="isVisible"
							width="220"
							trigger="manual"
							:visible-arrow="false"
						>
							<div>
								<el-checkbox :indeterminate="isMinate" v-model="checkAll" @change="handleCheckAllChange" tyle="padding-bottom: 5px"
									>全选</el-checkbox
								>
								<el-checkbox-group v-model="checkAll" @change="handleCheckedCitiesChange">
									<el-checkbox
										v-for="item in relateTypeArr"
										:label="item"
										:key="item + Math.random()"
										style="display: block; padding: 5px 0"
									>
										<el-tooltip
											:disabled="item && item.length <= 11"
											placement="right-end"
											width="300"
											effect="light"
											:visible-arrow="false"
											:content="item"
										>
											<span v-if="item && item.length > 11">{{ item.slice(0, 11) + '...' }}</span>
											<span v-else>{{ item }}</span>
										</el-tooltip>
									</el-checkbox>
								</el-checkbox-group>
								<el-divider></el-divider>
								<el-button type="text" :disabled="checkAll.length === 0" @click="sendFilterNameMethod">筛选</el-button>
								<el-button type="text" @click="handleFilterReset">重置</el-button>
							</div>
							<i class="el-icon-arrow-down" slot="reference" @click="togglePopover"></i> // 点击打开筛选框
						</el-popover>
					</div>
				</template>
			</vxe-column>

 // 打开关联类型筛选
		togglePopover() {
			this.isVisible = !this.isVisible
			this.checkAll = []
			// 添加点击监控事件，点击其他空白处关闭popover弹框
			if (this.isVisible) {
				document.addEventListener('click', this.closePopover)
			} else {
				document.removeEventListener('click', this.closePopover)
			}
		},
		// 全选处理
		handleCheckAllChange(val) {
			this.checkAll = val ? this.relateTypeArr : []
			this.isMinate = false
		},
		// 选择框内容更改时的处理
		handleCheckedCitiesChange(value) {
			const checkedCount = value.length
			this.checkAll = checkedCount === this.relateTypeArr.length
			this.isMinate = checkedCount > 0 && checkedCount < this.relateTypeArr.length
		},
        // 筛选 筛选出第二张表类型一致的数据
      sendFilterNameMethod() {
			this.isVisible = false
			const filterData = JSON.parse(this.oldTableData) // 这里对表二数据用json转了一下防止数据污染
			const tableData = filterData.filter(item => {
				return this.checkAll.includes(item.compareType)
			})
			this.tableDataArr = tableData
		},
		// 筛选重置
		handleFilterReset() {
			this.checkAll = false
			this.isMinate = false
			this.checkAll = []
			const filterData = JSON.parse(this.oldTableData)
			this.tableDataArr = filterData
			this.isVisible = false
		},
		// 模仿组件自带的点击空白处关闭弹框
		closePopover(event) {
			if (this.$refs.popover && this.$refs.popover.$el && !this.$refs.popover.$el.contains(event.target)) {
				this.visiblePover = false
			}
		}

		// 注意组件销毁时移除监听
		beforeDestory() {
		document.removeEventListener('click', this.closePopover)
	}