ProSearch 超级搜索
ProSearch 超级搜索组件是在 ProForm 超级表单 基础上进行拓展，因此完全兼容这些组件的所有 Props 配置、Emit 事件、Slots 插槽。
基础用法
vue
<script setup lang="ts" name="SimpleProSearch">
import type { SearchColumn } from "@/components/pro/search";
import type { FormItemColumnProps } from "@/components/pro/form-item";
import { ref, onMounted } from "vue";
import { ProSearch } from "@/components/pro/search";
const state = ref({});
const links = ref<{ value: string; link: string }[]>([]);
const querySearch = (queryString: string, cb: any) => {
const results = queryString ? links.value.filter(createFilter(queryString)) : links.value;
cb(results);
};
const createFilter = (queryString: string) => {
return (restaurant: { value: string; link: string }) => {
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
};
};
const columns: SearchColumn[] = [
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
{
label: "下拉自动补全",
prop: "autocomplete",
el: "el-autocomplete",
elProps: { fetchSuggestions: querySearch },
},
];
onMounted(() => {
links.value = loadAll();
});
const loadAll = () => {
return [
{ value: "vue", link: "https://github.com/vuejs/vue" },
{ value: "element", link: "https://github.com/ElemeFE/element" },
{ value: "cooking", link: "https://github.com/ElemeFE/cooking" },
{ value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
{ value: "vuex", link: "https://github.com/vuejs/vuex" },
{ value: "vue-router", link: "https://github.com/vuejs/vue-router" },
{ value: "babel", link: "https://github.com/babel/babel" },
];
};
const handleChange = (value: unknown, model: Record<string, any>, column: FormItemColumnProps) => {
console.log(value, model, column, "change");
};
const handleSearch = (model: Record<string, any>) => {
console.log(model, "search");
};
const handleReset = (model: Record<string, any>) => {
console.log(model, "reset");
};
</script>
<template>
<ProSearch :columns v-model="state" @change="handleChange" @search="handleSearch" @reset="handleReset" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
隐藏源代码
响应式布局
通过 searchCols 配置响应式布局。
通过 showRow 配置是否显示行数，默认为 1。
vue
<script setup lang="ts" name="SimpleProSearch">
import type { SearchColumn } from "@/components/pro/search";
import { ref, onMounted } from "vue";
import { ProSearch } from "@/components/pro/search";
const state = ref({});
const showRow = ref(1);
const links = ref<{ value: string; link: string }[]>([]);
const querySearch = (queryString: string, cb: any) => {
const results = queryString ? links.value.filter(createFilter(queryString)) : links.value;
cb(results);
};
const createFilter = (queryString: string) => {
return (restaurant: { value: string; link: string }) => {
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
};
};
const columns: SearchColumn[] = [
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
{
label: "下拉自动补全",
prop: "autocomplete",
el: "el-autocomplete",
elProps: { fetchSuggestions: querySearch },
},
];
onMounted(() => {
links.value = loadAll();
});
const loadAll = () => {
return [
{ value: "vue", link: "https://github.com/vuejs/vue" },
{ value: "element", link: "https://github.com/ElemeFE/element" },
{ value: "cooking", link: "https://github.com/ElemeFE/cooking" },
{ value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
{ value: "vuex", link: "https://github.com/vuejs/vuex" },
{ value: "vue-router", link: "https://github.com/vuejs/vue-router" },
{ value: "babel", link: "https://github.com/babel/babel" },
];
};
</script>
<template>
<div style="margin-bottom: 20px">
<el-button type="primary" plain @click="showRow === 1 ? (showRow = 2) : (showRow = 1)">
切换显示行数: {{ showRow === 1 ? 2 : 1 }}
</el-button>
</div>
<ProSearch :columns v-model="state" :show-row :search-cols="{ xs: 1, sm: 2, md: 2, lg: 1, xl: 1 }" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
隐藏源代码
折叠功能控制和隐藏
通过 collapse 配置控制默认展开还是折叠。
通过 showCollapse 配置是否显示展开折叠按钮。
vue
<script setup lang="ts" name="SimpleProSearch">
import type { SearchColumn } from "@/components/pro/search";
import type { FormItemColumnProps } from "@/components/pro/form-item";
import { ref, onMounted } from "vue";
import { ProSearch } from "@/components/pro/search";
const state = ref({});
const collapse = ref(true);
const showCollapse = ref(true);
const links = ref<{ value: string; link: string }[]>([]);
const querySearch = (queryString: string, cb: any) => {
const results = queryString ? links.value.filter(createFilter(queryString)) : links.value;
cb(results);
};
const createFilter = (queryString: string) => {
return (restaurant: { value: string; link: string }) => {
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
};
};
const columns: SearchColumn[] = [
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
{
label: "下拉自动补全",
prop: "autocomplete",
el: "el-autocomplete",
elProps: { fetchSuggestions: querySearch },
},
];
onMounted(() => {
links.value = loadAll();
});
const loadAll = () => {
return [
{ value: "vue", link: "https://github.com/vuejs/vue" },
{ value: "element", link: "https://github.com/ElemeFE/element" },
{ value: "cooking", link: "https://github.com/ElemeFE/cooking" },
{ value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
{ value: "vuex", link: "https://github.com/vuejs/vuex" },
{ value: "vue-router", link: "https://github.com/vuejs/vue-router" },
{ value: "babel", link: "https://github.com/babel/babel" },
];
};
</script>
<template>
<div style="margin-bottom: 20px">
<el-button type="primary" plain @click="collapse = !collapse">
{{ `${collapse ? "展开" : "折叠"}` }}
</el-button>
<el-button type="primary" plain @click="showCollapse = !showCollapse">
{{ `${showCollapse ? "隐藏" : "显示"} 折叠功能` }}
</el-button>
</div>
<ProSearch :columns v-model="state" :collapse :show-collapse />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
隐藏源代码
搜索按钮组位置
通过 position 配置搜索按钮组位置，默认为 right。
vue
<script setup lang="ts" name="SimpleProSearch">
import type { ActionPosition, SearchColumn } from "@/components/pro/search";
import { ref } from "vue";
import { ProSearch } from "@/components/pro/search";
const state = ref({});
const actionsPosition = ref<ActionPosition>("right");
const columns: SearchColumn[] = [
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
];
</script>
<template>
<div style="margin-bottom: 20px">
<el-radio-group v-model="actionsPosition">
<el-radio value="left">left</el-radio>
<el-radio value="right">right</el-radio>
<el-radio value="block-left">block-left</el-radio>
<el-radio value="block-center">block-center</el-radio>
<el-radio value="block-right">block-right</el-radio>
</el-radio-group>
</div>
<ProSearch :columns v-model="state" :position="actionsPosition" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
隐藏源代码
插槽自定义搜索按钮组
通过 actions 插槽配置自定义搜索按钮组渲染。
vue
<script setup lang="ts" name="SimpleProSearch">
import type { SearchColumn } from "@/components/pro/search";
import { ref, onMounted } from "vue";
import { ArrowDown, ArrowUp, Refresh, Search } from "@element-plus/icons-vue";
import { ProSearch } from "@/components/pro/search";
const state = ref({});
const links = ref<{ value: string; link: string }[]>([]);
const querySearch = (queryString: string, cb: any) => {
const results = queryString ? links.value.filter(createFilter(queryString)) : links.value;
cb(results);
};
const createFilter = (queryString: string) => {
return (restaurant: { value: string; link: string }) => {
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
};
};
const columns: SearchColumn[] = [
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
{
label: "下拉自动补全",
prop: "autocomplete",
el: "el-autocomplete",
elProps: { fetchSuggestions: querySearch },
},
];
onMounted(() => {
links.value = loadAll();
});
const loadAll = () => {
return [
{ value: "vue", link: "https://github.com/vuejs/vue" },
{ value: "element", link: "https://github.com/ElemeFE/element" },
{ value: "cooking", link: "https://github.com/ElemeFE/cooking" },
{ value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
{ value: "vuex", link: "https://github.com/vuejs/vuex" },
{ value: "vue-router", link: "https://github.com/vuejs/vue-router" },
{ value: "babel", link: "https://github.com/babel/babel" },
];
};
</script>
<template>
<ProSearch :columns v-model="state">
<template #action="{ search, reset, collapse, showCollapseButton, toggleCollapse }">
<div style="display: flex">
<el-button type="primary" :icon="Search" @click="search">搜索</el-button>
<el-button :icon="Refresh" @click="reset">重置</el-button>
<el-button v-if="showCollapseButton" :icon="collapse ? ArrowUp : ArrowDown" @click="toggleCollapse()">
{{ collapse ? "收起" : "展开" }}
</el-button>
</div>
</template>
</ProSearch>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
隐藏源代码
隐藏 label
通过 showLabel 配置是否显示 label，配置每一个 column 中的 showLabel 可以控制单个表单项的 label 是否显示，优先级会更高。
vue
<script setup lang="ts" name="SimpleProSearch">
import type { SearchColumn } from "@/components/pro/search";
import { ref, onMounted } from "vue";
import { ProSearch } from "@/components/pro/search";
const state = ref({
name: "Teek",
sex: "1",
});
const links = ref<{ value: string; link: string }[]>([]);
const querySearch = (queryString: string, cb: any) => {
const results = queryString ? links.value.filter(createFilter(queryString)) : links.value;
cb(results);
};
const createFilter = (queryString: string) => {
return (restaurant: { value: string; link: string }) => {
return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
};
};
const columns: SearchColumn[] = [
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
{
label: "下拉自动补全",
prop: "autocomplete",
el: "el-autocomplete",
elProps: { fetchSuggestions: querySearch },
},
];
onMounted(() => {
links.value = loadAll();
});
const loadAll = () => {
return [
{ value: "vue", link: "https://github.com/vuejs/vue" },
{ value: "element", link: "https://github.com/ElemeFE/element" },
{ value: "cooking", link: "https://github.com/ElemeFE/cooking" },
{ value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
{ value: "vuex", link: "https://github.com/vuejs/vuex" },
{ value: "vue-router", link: "https://github.com/vuejs/vue-router" },
{ value: "babel", link: "https://github.com/babel/babel" },
];
};
</script>
<template>
<ProSearch :columns v-model="state" :show-label="false" :show-collapse="false" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
隐藏源代码
options 字典
通过 options 配置给下拉框提供数据源，支持数组、函数、Promise。
vue
<script setup lang="ts" name="SimpleProSearch">
import type { SearchColumn } from "@/components/pro/search";
import { ref } from "vue";
import { ProSearch } from "@/components/pro/search";
const state = ref({
status: "0",
async: "0",
promise: "0-0-0",
time: new Date().toString(),
});
const columns: SearchColumn[] = [
{
label: "函数状态",
prop: "status",
el: "el-select",
options: () => [
{ label: "未解决", value: "0" },
{ label: "已解决", value: "1" },
{ label: "解决中", value: "2" },
{ label: "失败", value: "3" },
],
},
{
label: "async函数状态",
prop: "async",
el: "el-select",
options: async () => {
// 等待 2s
await new Promise(resolve => {
setTimeout(() => {
resolve("");
}, 2000);
});
return [
{ label: "pending", value: "0" },
{ label: "fulfilled", value: "1" },
{ label: "rejected", value: "1" },
];
},
},
{
label: "promise 城市",
prop: "promise",
el: "el-cascader",
options: () => {
return new Promise(resolve => {
setTimeout(() => {
resolve([
{
value: "0",
label: "陕西",
children: [
{
value: "0-0",
label: "西安",
children: [
{ value: "0-0-0", label: "新城区" },
{ value: "0-0-1", label: "高新区" },
{ value: "0-0-2", label: "灞桥区" },
],
},
],
},
{
value: "1",
label: "山西",
children: [
{
value: "1-0",
label: "太原",
children: [
{ value: "1-0-0", label: "小店区" },
{ value: "1-0-1", label: "古交市" },
{ value: "1-0-2", label: "万柏林区" },
],
},
],
},
]);
}, 2000);
});
},
},
];
</script>
<template>
<ProSearch :columns v-model="state" />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
隐藏源代码
组合式函数
通过 组合式函数 函数，监听任意一个超级搜索，然后就通过函数来控制该搜索表单。
vue
<script setup lang="ts" name="UseProSearchDemo">
import type { SearchColumn, ActionPosition } from "@/components/pro/search";
import { ref, reactive } from "vue";
import { ProSearch, useProSearch } from "@/components/pro/search";
const { searchRegister, searchMethods } = useProSearch();
const { setColumn, setProps, setValues, getFormModel } = searchMethods;
const model = ref({});
const handleSearch = async (data: any) => {
const formData = await getFormModel();
console.log(formData);
console.log(data);
};
const changePosition = (position: ActionPosition) => {
setProps({ position });
};
const changeSex = (del: boolean) => {
setColumn([
{
prop: "sex",
field: "destroy",
value: del,
},
]);
};
const setValue = () => {
setValues({
name: "Young Kbt",
});
};
const changeCollapsedRows = (rows: number) => {
setProps({ showRow: rows });
};
const useCollapsed = (use: boolean) => {
setProps({ showCollapse: use });
};
const changeSearchLoading = () => {
setProps({ searchLoading: true });
setTimeout(() => {
setProps({ searchLoading: false });
}, 2000);
};
const changeResetLoading = () => {
setProps({ resetLoading: true });
setTimeout(() => {
setProps({ resetLoading: false });
}, 2000);
};
const columns: SearchColumn[] = reactive([
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
{
label: "input 框",
prop: "input",
el: "el-input",
},
{
label: "input 框",
prop: "input1",
el: "el-input",
},
{
label: "input 框",
prop: "input2",
el: "el-input",
},
{
label: "input 框",
prop: "input3",
el: "el-input",
},
{
label: "input 框",
prop: "input4",
el: "el-input",
},
]);
</script>
<template>
<el-space fill>
<el-card shadow="never">
<el-space wrap>
<el-button @click="changePosition('left')">按钮不换行 位置左</el-button>
<el-button @click="changePosition('right')">按钮不换行 位置右</el-button>
<el-button @click="changePosition('block-left')">按钮换行 位置左</el-button>
<el-button @click="changePosition('block-center')">按钮换行 位置中</el-button>
<el-button @click="changePosition('block-right')">按钮换行 位置右</el-button>
<el-button @click="changeSex(true)">删除性别</el-button>
<el-button @click="changeSex(false)">恢复性别</el-button>
<el-button @click="setValue()">设置姓名值</el-button>
<el-button @click="changeCollapsedRows(2)">默认显示两行</el-button>
<el-button @click="changeCollapsedRows(1)">默认显示一行</el-button>
<el-button @click="useCollapsed(false)">关闭折叠功能</el-button>
<el-button @click="useCollapsed(true)">使用折叠功能</el-button>
<el-button @click="changeSearchLoading">搜索按钮 loading</el-button>
<el-button @click="changeResetLoading">重置按钮 loading</el-button>
</el-space>
</el-card>
<ProSearch :columns v-model="model" @search="handleSearch" @reset="handleSearch" @register="searchRegister" />
</el-space>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
隐藏源代码
函数式组件渲染
通过 createSearchComponent 函数式创建 ProSearch 组件。
vue
<script setup lang="ts" name="CreateProSearch">
import type { SearchColumn } from "@/components/pro/search";
import { ref, reactive } from "vue";
import { useProSearch } from "@/components/pro/search";
const {
createMethods: { createSearchComponent },
} = useProSearch();
const model = ref<Record<string, any>>({});
/**
* context 里有 slots 和 attrs，如果元素里有 slots 和 attrs，则必传
*/
const RenderProSearch = (_: any, context: Record<string, any>) => {
// 函数式创建 Template 组件
return createSearchComponent(
{
columns: columns,
modelValue: model.value,
onSearch: handleSearch,
onReset: handleSearch,
},
context
);
};
const handleSearch = async (data: Record<string, any>) => {
console.log(data);
};
const columns: SearchColumn[] = reactive([
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
{
label: "input 框",
prop: "input",
el: "el-input",
},
{
label: "input 框",
prop: "input1",
el: "el-input",
},
{
label: "input 框",
prop: "input2",
el: "el-input",
},
{
label: "input 框",
prop: "input3",
el: "el-input",
},
{
label: "input 框",
prop: "input4",
el: "el-input",
},
]);
</script>
<template>
<RenderProSearch />
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
隐藏源代码
函数式渲染
通过 createSearch 函数式动态渲染 ProSearch 组件到指定元素。
该函数会返回 useProSearch 函数的返回值，如果你不清楚什么是 useProSearch，请查看 组合式函数。
vue
<script setup lang="ts" name="CreateProSearch">
import type { SearchColumn } from "@/components/pro/search";
import { ref, reactive } from "vue";
import { useProSearch } from "@/components/pro/search";
const {
createMethods: { createSearch },
} = useProSearch();
const model = ref<Record<string, any>>({});
const handleSearch = async (data: Record<string, any>) => {
console.log(data);
};
const columns: SearchColumn[] = reactive([
{
label: "姓名",
prop: "name",
el: "el-input",
},
{
label: "性别",
prop: "sex",
el: "el-select",
options: [
{ label: "男", value: "1" },
{ label: "女", value: "2" },
],
},
{
label: "年龄",
prop: "age",
el: "el-input-number",
defaultValue: 18,
},
{
label: "状态",
prop: "status",
el: "el-select",
options: [
{ label: "在职", value: "1" },
{ label: "离职", value: "2" },
],
},
{
label: "input 框",
prop: "input",
el: "el-input",
},
{
label: "input 框",
prop: "input1",
el: "el-input",
},
{
label: "input 框",
prop: "input2",
el: "el-input",
},
{
label: "input 框",
prop: "input3",
el: "el-input",
},
{
label: "input 框",
prop: "input4",
el: "el-input",
},
]);
createSearch("proSearchInstance", { columns, modelValue: model.value, onSearch: handleSearch, onReset: handleSearch });
</script>
<template>
<div ref="proSearchInstance"></div>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
隐藏源代码
SearchColumn 配置项
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| grid | GridItem 属性 | object | — |
| ... | 其他扩展属性，支持所有 FormColumn 配置项 | ... | ... |
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 搜索配置列 | array | [] |
| position | Action 位置，block-* 代表换行 | string | right |
| showAction | 是否展示操作按钮 | boolean | true |
| showSearch | 是否展示搜索按钮 | boolean | true |
| showReset | 是否展示重置按钮 | boolean | true |
| showCollapse | 是否展示折叠功能 | boolean | true |
| searchText | 搜索按钮的文字 | string | 搜索 |
| resetText | 重置按钮的文字 | string | 重置 |
| collapseText | 展开按钮的文字 | string | 展开 |
| expandText | 折叠按钮的文字 | string | 折叠 |
| searchLoading | 搜索按钮的 loading | boolean | false |
| resetLoading | 重置按钮的 loading | boolean | false |
| searchCols | 响应式布局 | object | |
| gap | 行和列间距 | array | [20, 0] |
| collapse | 是否默认折叠搜索项 | boolean | true |
| showRow | 超出指定行数后折叠 | number | 1 |
| removeNoValue | 是否自动去除表单数据的空值项 | boolean | true |
| validate | 是否校验表单组件 | boolean | true |
| showLabel | 是否显示 label，优先级低于 form.showLabel | boolean | true |
| collapseTransition | 是否开启折叠动画 | boolean | true |
| collapseDuration | 折叠动画持续时长(单位：ms) | number | 300 |
| form | ProForm 组件 Props | object ProFormProps | {} |
Events
| 名称 | 说明 | 类型 |
|---|---|---|
| search | 搜索事件 | function |
| reset | 重置事件 | function |
| register | 注册事件 | function |
| validate | ElForm 验证触发事件 | function |
| change | 表单值改变事件 | function |
Slots
| 插槽名 | 说明 | 作用域插槽参数 |
|---|---|---|
| action | 自定义操作按钮区域 | object |
| ... | 其他扩展属性，支持所有 ProForm Slots | ... |
Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| model | 表单数据 | object |
| toggleCollapse | 折叠或展开搜索项 | function |
| setProps | 设置组件的 props | function |
| setColumn | 设置 column | function |
| setValues | 设置 model 的值 | function |
| delColumn | 删除 column | function |
| addColumn | 添加 column | function |
| search | 触发搜索事件 | function |
| reset | 触发重置事件 | function |
| proFormInstance | ProForm 组件实例 | object |
| getOptionsMap | 获取所有 options 缓存数据 | function |
| getProFormInstance | 获取 ProForm 实例 | function |
| getElFormInstance | 获取 ElForm 实例 | function |
| getElFormItemInstance | 获取指定 prop 的 ElFormItem 实例 | function |
| getElInstance | 获取表单组件实例 | function |