From 3959e507bfa99cc4ced2a6f48f9b4358334d34c4 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 19 十二月 2023 17:34:45 +0800
Subject: [PATCH] 1. 调试表单选项组件的双向绑定逻辑
---
src/components/search-option/FYOptionLocation.vue | 108 +++++++++++++++++++++---------------------------------
1 files changed, 42 insertions(+), 66 deletions(-)
diff --git a/src/components/search-option/FYOptionLocation.vue b/src/components/search-option/FYOptionLocation.vue
index ea6c3d4..f4dc270 100644
--- a/src/components/search-option/FYOptionLocation.vue
+++ b/src/components/search-option/FYOptionLocation.vue
@@ -1,7 +1,8 @@
<template>
<el-form-item :label="placeholder" :prop="prop">
<el-cascader
- v-model="selectedOptions"
+ :model-value="formatedValue"
+ @change="handleChange"
:options="locations"
:placeholder="placeholder"
:props="optionProps"
@@ -11,10 +12,7 @@
</template>
<script>
-import { enumLocation } from '@/enum/location'
-
-// 璁板綍閫夐」鏄惁鏄嚜瀹氫箟浼犲叆鐨�
-let customValue = true
+import { enumLocation } from '@/enum/location';
export default {
props: {
@@ -46,50 +44,28 @@
data() {
return {
locations: enumLocation(this.allOption, this.level),
- selectedOptions: [],
optionProps: {
checkStrictly: this.checkStrictly
}
- }
+ };
},
computed: {
placeholder() {
- const list = '鐪�/甯�/鍖�/闀�'.split('/')
- const p = []
+ const list = '鐪�/甯�/鍖�/闀�'.split('/');
+ const p = [];
for (let i = 0; i < this.level; i++) {
- p.push(list[i])
+ p.push(list[i]);
}
- return p.join('/')
- }
- },
- watch: {
- selectedOptions: {
- handler(nVal, oVal) {
- if (nVal != oVal) {
- const res = this.optionFormat(nVal)
- // 鏍囨槑姝ゆ椂鐨剉alue鏇存柊鏄粍浠跺唴閮ㄨЕ鍙�
- customValue = false
- this.$emit('update:value', res)
- }
- },
- deep: true
+ return p.join('/');
},
- value: {
- handler(nVal, oVal) {
- // 鍙湁褰撳�兼槸澶栭儴浼犲叆鏃讹紝鎵嶈Е鍙戞洿鏂�
- if (!customValue) {
- customValue = true
- return
- }
- if (nVal != oVal) {
- this.selectedOptions = this.optionFormatReverse(nVal)
- }
- },
- deep: true,
- immediate: true
+ formatedValue() {
+ return this.optionFormatReverse(this.value);
}
},
methods: {
+ handleChange(value) {
+ this.$emit('update:value', this.optionFormat(value));
+ },
/**
* 鍦板尯閫夐」缁撴灉鏍煎紡鍖�
*/
@@ -103,61 +79,61 @@
dName: null,
tCode: null,
tName: null
- }
+ };
if (val.length > 0) {
- res.pCode = val[0][0]
- res.pName = val[0][1]
+ res.pCode = val[0][0];
+ res.pName = val[0][1];
}
if (val.length > 1) {
- res.cCode = val[1][0]
- res.cName = val[1][1]
+ res.cCode = val[1][0];
+ res.cName = val[1][1];
}
if (val.length > 2) {
- res.dCode = val[2][0]
- res.dName = val[2][1]
+ res.dCode = val[2][0];
+ res.dName = val[2][1];
}
if (val.length > 3) {
- res.tCode = val[3][0]
- res.tName = val[3][1]
+ res.tCode = val[3][0];
+ res.tName = val[3][1];
}
- return res
+ return res;
},
optionFormatReverse(val) {
- const res = []
+ const res = [];
if (val) {
- if (val.pCode) {
- res.push([val.pCode, val.pName])
+ if (val.pName) {
+ res.push([val.pCode, val.pName]);
}
- if (val.cCode) {
- res.push([val.cCode, val.cName])
+ if (val.cName) {
+ res.push([val.cCode, val.cName]);
}
- if (val.dCode) {
- res.push([val.dCode, val.dName])
+ if (val.dName) {
+ res.push([val.dCode, val.dName]);
}
- if (val.tCode) {
- res.push([val.tCode, val.tName])
- }
+ if (val.tName) {
+ res.push([val.tCode, val.tName]);
+ }
}
- return res
+ return res;
}
},
mounted() {
if (this.initValue) {
if (this.checkStrictly) {
- this.selectedOptions = [this.locations[0].value]
+ this.handleChange([this.locations[0].value]);
} else {
const f = (location) => {
if (location.children && location.children.length > 0) {
- const r = f(location.children[0])
- r.unshift(location.value)
- return r
+ const r = f(location.children[0]);
+ r.unshift(location.value);
+ return r;
} else {
- return [location.value]
+ return [location.value];
}
- }
- this.selectedOptions = f(this.locations[0])
+ };
+ this.handleChange(f(this.locations[0]));
}
}
}
-}
+};
</script>
--
Gitblit v1.9.3