JavaScript中实用的英文单词表模块介绍

{{ col.label }} <template v-if="col.templet !== 'tool' && col.filter && col.prop"> <el-popover :visible="visible && col.prop === showKey" placement="bottom" :width="'fit-content'" > <template #reference> </template> </el-popover> </template>

</template> </template> </template> <template v-else-if="col.templet === 'date'"> <template v-if="col.prop"> {{ scope.row[col.prop] ? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss").value : "" }} </template> </template> <template v-else-if="col.templet === 'sys-code'"> <FkSysCodeLable v-if="col.prop" v-model="scope.row[col.prop]" :code="col.sysCodeSetCode" /> </template> <template v-else-if="col.templet === 'copy'"> <el-text>{{ scope.row[col.prop] }}</el-text> <copy-button v-if="scope.row[col.prop]" :text="scope.row[col.prop]" style="margin-left: 2px" /> </template> <template v-else-if="col.templet === 'yes-no'"> <el-tag :type="scope.row[col.prop] == '1' ? 'success' : 'info'"> {{ scope.row[col.prop] == "1" ? "启用" : "禁用" }} </el-tag> </template> <template v-else-if="col.templet === 'translate'"> {{ scope.row[col.prop + "Name"] }} </template> </template> </el-table-column> </template> <script setup lang="ts"> import _ from "lodash"; import SysOrgAPI from "@/api/zxyy-org-service/sysOrg/sysOrg.api"; import { useSysCodeStore } from "@/store"; const sysCodeStore = useSysCodeStore(); import moment, { MomentInput } from "moment"; // 定义接收的属性 const props = defineProps<{ col: any; permPrefix?: any; lastSelectFormData?: any }>(); // 重写方法 const emit = defineEmits(["filter", "cancelFilter"]); // 解决办法：声明一下键值对的类型 type objType = { [key: string]: any; }; // 表头筛选处理 const showKey = ref(); // 当前展示哪个筛选窗 const visible = ref(false); // 手动控制筛选窗显隐 const searchData = ref<objType>({}); // 搜索参数 每个表头字段 // 触发筛选 async function toggleNameFilter(key?: string, col?: any) { if (!key) { return; } // console.log(key, item); if (col.filter.needGetList) { await getJavaList(col); // 调用后端接口 获取下拉数据 } if (visible.value && showKey.value && showKey.value !== key) { visible.value = false; // fetchPageData(lastFormData, true); } showKey.value = key; visible.value = true; } // 某些下拉数据 例如下拉大数据有500条 直接赋值会导致表格卡顿 通过点击表头再去接口获取数据赋值就不会影响表格的渲染 // （列里面数据回显使用后端给的中文，或者将javaList赋值给item的selectList） let javaList = ref(); let javaListObj = ref<objType>({}); const getJavaList = async (col: any) => { console.log("getJavaList"); if (javaListObj.value[col.filter.filterCodeSetId]) { javaList.value = javaListObj.value[col.filter.filterCodeSetId]; console.log("getJavaList-javaListObj", javaList.value); return; } if (col.filter.filterCodeSetId == "org") { console.log("filterCodeSetId", col.filter.filterCodeSetId); javaList.value = await SysOrgAPI.getSysOrgOptions(); } if (col.filter.filterCodeSetId == "person") { // javaList.value = await SysOrgAPI.getSysOrgOptions(); } if (col.filter.filterCodeSetId == "sys-code") { javaList.value = sysCodeStore.getSysCodeSetItems(col.sysCodeSetCode); } console.log("javaList", javaList.value); javaListObj.value[col.filter.filterCodeSetId] = javaList.value; console.log("javaListObj", javaListObj.value); }; // 单独过滤 const applyNameFilter = () => { // Filtering logic can be customized if needed }; const applyTagFilter = () => { // Filtering logic can be customized if needed }; // 时间格式化 const changeData = (value: MomentInput[], key: string | number, dateType: string | undefined) => { // console.log(value, key, dateType); if (!_.isEmpty(value)) { searchData.value[key][0] = value[0] ? moment(value[0]).format(dateType) : ""; searchData.value[key][1] = value[1] ? moment(value[1]).format(dateType) : ""; } else { searchData.value[key] = []; } }; // 单个重置 function cancelFilter(key: string) { searchData.value[key] = undefined; emit("cancelFilter", key); // let filters = props.lastSelectFormData.filters.filter((o: any) => { // return o.column != showKey.value; // }); // props.lastSelectFormData.filters = filters; // let headers = props.lastSelectFormData.headers.filter((o: any) => { // return o.field != showKey.value; // }); // props.lastSelectFormData.headers = headers; visible.value = false; // console.log("cancelFilter", searchData.value); // fetchPageData(lastFormData, true); //emit("cancelFilter", key); //emit("filter", props.lastSelectFormData); } // 筛选 const searchFilter = () => { console.log("searchFilter"); visible.value = false; let filters = []; let headers = []; for (const key in searchData.value) { const col = props.col; if (col && Object.hasOwnProperty.call(searchData.value, key) && searchData.value[key]) { filters.push({ column: key, value: props.col.filter.filterValueType === "string" ? searchData.value[key].join(",") : searchData.value[key], type: col.filter.filterType, operator: col.filter.filterOperator, }); headers.push({ field: key, name: col.label, dataType: col.filter.filterDataType, codeSetId: col.filter.filterCodeSetId, }); } } props.lastSelectFormData.filters = filters; props.lastSelectFormData.headers = headers; emit("filter", props.lastSelectFormData); console.log("searchFilter1"); console.log("searchFilter2", props.lastSelectFormData); }; // 监听外部传入的 modelValue 变化 watch( () => props.lastSelectFormData.filters, (newValue) => { if (!newValue || newValue.length == 0) { searchData.value = {}; visible.value = false; } }, { immediate: true } ); // 点击外部区域关闭弹窗 import { ClickOutside as vClickOutside } from "element-plus"; defineComponent({ directives: { "click-outside": vClickOutside }, // 局部注册 }); const handleClickOutside = () => { visible.value = false; }; </script> <style lang="scss" scoped> :deep(.el-table) { // height: 700px; /* 设置表格整体固定高度 */ thead { .cell { display: flex; min-width: 100px; position: relative; .table-header-div { // flex: 1; display: flex; .title-span { flex-grow: 1; word-break: break-word; /* 允许单词在任何地方断行 */ } .el-only-child__content { height: 23px; } .icon-span { flex-shrink: 0; margin-top: 1px; margin-left: 5px; cursor: pointer; /* 防止缩小 */ /* 给图标和标题之间添加一些间距 */ } } .caret-wrapper { margin-top: 5px; } } } } .filter-container { display: flex; justify-content: center; align-items: center; } /* 筛选图标激活状态样式 */ .el-icon.filter-active { color: #409eff !important; /* Element UI的主题蓝色 */ } </style> 优化，点击弹窗外部，自动关闭弹窗，点击嵌套弹窗，不关闭主弹窗