Browse Source

🪬调整级联选择器配置选项写法,避免数据量大时造成卡顿

KaneLeung 1 year ago
parent
commit
e8fa48c8a3

+ 4 - 1
Web/src/views/system/codeGen/component/editCodeGenDialog.vue

@@ -81,9 +81,10 @@
 						<el-form-item label="父级菜单" prop="menuPid">
 							<el-cascader
 								:options="state.menuData"
-								:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'title' }"
+								:props="cascaderProps"
 								placeholder="请选择上级菜单"
 								:disabled="!state.ruleForm.generateMenu"
+								filterable
 								clearable
 								class="w100"
 								v-model="state.ruleForm.menuPid"
@@ -172,6 +173,8 @@ const state = reactive({
 	printTypeList: [] as any,
 	printList: [] as Array<SysPrint>,
 });
+//级联选择器配置选项
+const cascaderProps = { checkStrictly: true, emitPath: false, value: 'id', label: 'title' };
 
 onMounted(async () => {
 	var resDb = await getAPI(SysCodeGenApi).apiSysCodeGenDatabaseListGet();

+ 3 - 8
Web/src/views/system/menu/component/editMenu.vue

@@ -11,14 +11,7 @@
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="上级菜单">
-							<el-cascader
-								:options="props.menuData"
-								:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'title' }"
-								placeholder="请选择上级菜单"
-								clearable
-								class="w100"
-								v-model="state.ruleForm.pid"
-							>
+							<el-cascader :options="props.menuData" :props="cascaderProps" placeholder="请选择上级菜单" clearable filterable class="w100" v-model="state.ruleForm.pid">
 								<template #default="{ node, data }">
 									<span>{{ data.title }}</span>
 									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -165,6 +158,8 @@ const state = reactive({
 	isShowDialog: false,
 	ruleForm: {} as UpdateMenuInput,
 });
+//级联选择器配置选项
+const cascaderProps = { checkStrictly: true, emitPath: false, value: 'id', label: 'title' };
 
 // 获取全局组件大小
 const getGlobalComponentSize = computed(() => {

+ 3 - 8
Web/src/views/system/org/component/editOrg.vue

@@ -11,14 +11,7 @@
 				<el-row :gutter="35">
 					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
 						<el-form-item label="上级机构">
-							<el-cascader
-								:options="props.orgData"
-								:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
-								placeholder="请选择上级机构"
-								clearable
-								class="w100"
-								v-model="state.ruleForm.pid"
-							>
+							<el-cascader :options="props.orgData" :props="cascaderProps" placeholder="请选择上级机构" clearable filterable class="w100" v-model="state.ruleForm.pid">
 								<template #default="{ node, data }">
 									<span>{{ data.name }}</span>
 									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -96,6 +89,8 @@ const state = reactive({
 	ruleForm: {} as UpdateOrgInput,
 	orgTypeList: [] as any,
 });
+//级联选择器配置选项
+const cascaderProps = { checkStrictly: true, emitPath: false, value: 'id', label: 'name' };
 
 onMounted(async () => {
 	let resDicData = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('org_type');

+ 3 - 1
Web/src/views/system/region/component/editRegion.vue

@@ -13,7 +13,7 @@
 						<el-form-item label="上级名称">
 							<el-cascader
 								:options="regionData"
-								:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
+								:props="cascaderProps"
 								placeholder="请选择上级名称"
 								clearable
 								class="w100"
@@ -84,6 +84,8 @@ const state = reactive({
 	isShowDialog: false,
 	ruleForm: {} as UpdateRegionInput,
 });
+//级联选择器配置选项
+//const cascaderProps = { checkStrictly: true, emitPath: false, value: 'id', label: 'name' };
 
 // 打开弹窗
 const openDialog = (row: any) => {

+ 5 - 17
Web/src/views/system/user/component/editUser.vue

@@ -62,14 +62,7 @@
 							</el-divider>
 							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
 								<el-form-item label="所属机构" prop="orgId" :rules="[{ required: true, message: '所属机构不能为空', trigger: 'blur' }]">
-									<el-cascader
-										:options="props.orgData"
-										:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' }"
-										placeholder="所属机构"
-										clearable
-										class="w100"
-										v-model="state.ruleForm.orgId"
-									>
+									<el-cascader :options="props.orgData" :props="cascaderProps" placeholder="所属机构" clearable filterable class="w100" v-model="state.ruleForm.orgId">
 										<template #default="{ node, data }">
 											<span>{{ data.name }}</span>
 											<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -115,14 +108,7 @@
 													<el-button icon="ele-Delete" type="danger" circle plain size="small" @click="deleteExtOrgRow(k)" />
 													<span class="ml5">机构</span>
 												</template>
-												<el-cascader
-													:options="props.orgData"
-													:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' }"
-													placeholder="机构组织"
-													clearable
-													class="w100"
-													v-model="state.ruleForm.extOrgIdList[k].orgId"
-												>
+												<el-cascader :options="props.orgData" :props="cascaderProps" placeholder="机构组织" clearable filterable class="w100" v-model="state.ruleForm.extOrgIdList[k].orgId">
 													<template #default="{ node, data }">
 														<span>{{ data.name }}</span>
 														<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -174,7 +160,7 @@
 										<el-radio :value="1">男</el-radio>
 										<el-radio :value="2">女</el-radio>
 										<el-radio :value="0">未知的性别</el-radio>
-                                        <el-radio :value="9">未说明的性别</el-radio>
+										<el-radio :value="9">未说明的性别</el-radio>
 									</el-radio-group>
 								</el-form-item>
 							</el-col>
@@ -285,6 +271,8 @@ const state = reactive({
 	posData: [] as Array<SysPos>, // 职位数据
 	roleData: [] as Array<RoleOutput>, // 角色数据
 });
+//级联选择器配置选项
+const cascaderProps = { checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' };
 
 onMounted(async () => {
 	state.loading = true;