feat: 新增SchemaSelect保留输入值特性

刘汉宸
1 parent 161f4038
Showing 2 changed files with 65 additions and 3 deletions Show diff stats
examples/views/docs/component/schema-select.md
packages/schema-select/index.vue
@@ -103,6 +103,62 @@ export default {
 :::
+## 保持输入值
+
+若没有查询到相关结果时，允许保持当前输入值为绑定值。
+
+::: snippet 设置`allow-create`允许创建数据源之外的新值。
+
+```html
+<template>
+  <div>
+    <z-schema-select v-model="model" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id" allow-create></z-schema-select>
+    <span>{{ model }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: '那谁',
+      schema: {
+        table: {
+          props: {
+            border: false
+          },
+          items: [
+            { label: '姓名', prop: 'name', minWidth: 120 },
+            { label: '年龄', prop: 'age', minWidth: 120 },
+            { label: '地址', prop: 'address', minWidth: 120 },
+          ]
+        }
+      },
+    }
+  },
+  methods: {
+    searchAPI(params) {
+      console.log('search', params);
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const list = [
+            { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
+            { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
+            { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
+            { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
+            { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
+          ];
+          resolve([list, 37]);
+        }, 500);
+      });
+    },
+  }
+}
+</script>
+```
+
+:::
+
 ## 设置默认文本
 通常情况下，编辑表单时，若未加载搜索接口，则需要给定一个对应当前值的默认显示的文本
@@ -116,13 +116,14 @@ export default {
       type: String,
       default: 'value',
     },
-    'value-filter': {
+    allowCreate: Boolean,
+    valueFilter: {
       type: Object,
       default() {
         return {};
       },
     },
-    'api-search': Function,
+    apiSearch: Function,
   },
   inject: {
     elForm: {
@@ -232,10 +233,15 @@ export default {
       this.query = this.model;
       if (this.$refs.schema) {
         this.$refs.schema.search();
+        if (this.allowCreate) {
+          this.$emit('input', this.query);
+        }
       }
     },
     onInputFocus() {
-      this.model = '';
+      if (!this.allowCreate) {
+        this.model = '';
+      }
     },
     onInputBlur() {
       if (!this.visible) {
	@@ -103,6 +103,62 @@ export default {		@@ -103,6 +103,62 @@ export default {
103		103
104	:::	104	:::
105		105
		106	+## 保持输入值
		107	+
		108	+若没有查询到相关结果时，允许保持当前输入值为绑定值。
		109	+
		110	+::: snippet 设置`allow-create`允许创建数据源之外的新值。
		111	+
		112	+```html
		113	+<template>
		114	+ <div>
		115	+ <z-schema-select v-model="model" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id" allow-create></z-schema-select>
		116	+ <span>{{ model }}</span>
		117	+ </div>
		118	+</template>
		119	+
		120	+<script>
		121	+export default {
		122	+ data() {
		123	+ return {
		124	+ model: '那谁',
		125	+ schema: {
		126	+ table: {
		127	+ props: {
		128	+ border: false
		129	+ },
		130	+ items: [
		131	+ { label: '姓名', prop: 'name', minWidth: 120 },
		132	+ { label: '年龄', prop: 'age', minWidth: 120 },
		133	+ { label: '地址', prop: 'address', minWidth: 120 },
		134	+ ]
		135	+ }
		136	+ },
		137	+ }
		138	+ },
		139	+ methods: {
		140	+ searchAPI(params) {
		141	+ console.log('search', params);
		142	+ return new Promise(resolve => {
		143	+ setTimeout(() => {
		144	+ const list = [
		145	+ { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
		146	+ { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
		147	+ { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
		148	+ { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
		149	+ { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
		150	+ ];
		151	+ resolve([list, 37]);
		152	+ }, 500);
		153	+ });
		154	+ },
		155	+ }
		156	+}
		157	+</script>
		158	+```
		159	+
		160	+:::
		161	+
106	## 设置默认文本	162	## 设置默认文本
107		163
108	通常情况下，编辑表单时，若未加载搜索接口，则需要给定一个对应当前值的默认显示的文本	164	通常情况下，编辑表单时，若未加载搜索接口，则需要给定一个对应当前值的默认显示的文本