# SearchForm 查询表单
简单查询表单，通过配置项快速创建数据查询表单，常用于过滤表格或列表数据。
# 基本用法
点击查看代码
<template>
<s-search-form :items="searchItems"></s-search-form>
</template>
<script>
export default {
data() {
return {
searchItems: [
{ label: "姓名", name: "name", type: "text" },
{ label: "电话", name: "phone", type: "text" }
]
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 显示边框
点击查看代码
<template>
<s-search-form :items="searchItems" border></s-search-form>
</template>
<script>
export default {
data() {
return {
searchItems: [
{ label: "姓名", name: "name", type: "text" },
{ label: "电话", name: "phone", type: "text" }
]
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 表单项类型
点击查看代码
<template>
<s-search-form :items="searchItems">
<template #dept="{ item, values }">
<el-select v-model="values[item.name]" style="width: 100%" placeholder="所属单位" clearable>
<el-option label="研发部" value="研发部" />
<el-option label="市场部" value="市场部" />
<el-option label="技术部" value="技术部" />
</el-select>
</template>
</s-search-form>
</template>
<script>
export default {
data() {
return {
searchItems: [
{ label: "文本框", name: "textInput", type: "text" },
{ label: "数字框", name: "numberInput", type: "number" },
{ label: "下拉框", name: "selectInput", type: "select",
options: [ { label: "选项一", value: "option1" }, { label: "选项一", value: "option2" } ]
},
{ label: "日期框", name: "dateInput", type: "date" },
{ label: "时间框", name: "timeInput", type: "time" },
{ label: "插槽", name: "slotInput", type: "slot", scopedSlots: "dept" }
]
};
}
}
</script>
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
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
# 表单布局
点击查看代码
<template>
<div>
<el-descriptions :column="2" colon>
<el-descriptions-item label="表单项列数">
<el-radio-group v-model="searchFormCols">
<el-radio v-for="item in [2, 3, 4, 6, 8]" :key="item" :label="item" :value="item" />
</el-radio-group>
</el-descriptions-item>
<el-descriptions-item label="表单项间距">
<el-slider v-model="searchFormGutter" style="margin: 0 .5rem;width: 80%;" :min="0" :max="50" />
</el-descriptions-item>
</el-descriptions>
<s-search-form :items="searchItems" :cols="searchFormCols" :gutter="searchFormGutter"></s-search-form>
</div>
</template>
<script>
export default {
data() {
return {
searchFormCols: 3,
searchFormGutter: 8,
searchItems: [
{ label: "字段1", name: "field1", type: "text" },
{ label: "字段2", name: "field2", type: "text" },
{ label: "字段3", name: "field3", type: "text" },
{ label: "字段4", name: "field4", type: "text" },
{ label: "字段5", name: "field5", type: "text" },
{ label: "字段6", name: "field6", type: "text" }
]
};
}
}
</script>
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
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
# 表单尺寸
点击查看代码
<template>
<div>
<el-descriptions :column="1" colon>
<el-descriptions-item label="表单项列数">
<el-radio-group v-model="searchFormSize">
<el-radio v-for="item in searchFormSizeOptions" :key="item" :label="item.label" :value="item.value" />
</el-radio-group>
</el-descriptions-item>
</el-descriptions>
<s-search-form :items="searchItems" :size="searchFormSize"></s-search-form>
</div>
</template>
<script>
export default {
data() {
return {
searchFormSize: undefined,
searchFormSizeOptions: [
{ value: "medium", label: "medium" },
{ value: "small", label: "small" },
{ value: "mini", label: "mini" }
],
searchItems: [
{ label: "字段1", name: "field1", type: "text" },
{ label: "字段2", name: "field2", type: "text" },
{ label: "字段3", name: "field3", type: "text" }
]
};
}
}
</script>
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
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
# 表单展开收起
点击查看代码
<template>
<div>
<el-descriptions :column="2" colon>
<el-descriptions-item label="允许收起">
<el-switch v-model="searchFormCollapsible" />
</el-descriptions-item>
<el-descriptions-item label="收起状态">
<el-switch v-model="searchFormCollapsed" />
</el-descriptions-item>
</el-descriptions>
<s-search-form :items="searchItems" :collapsible="searchFormCollapsible" :collapsed.sync="searchFormCollapsed"></s-search-form>
</div>
</template>
<script>
export default {
data() {
return {
searchFormCollapsible: true,
searchFormCollapsed: true,
searchItems: [
{ label: "字段1", name: "field1", type: "text" },
{ label: "字段2", name: "field2", type: "text" },
{ label: "字段3", name: "field3", type: "text" },
{ label: "字段4", name: "field4", type: "text" },
{ label: "字段5", name: "field5", type: "text" },
{ label: "字段6", name: "field6", type: "text" }
]
};
}
}
</script>
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
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
# 自定义操作栏
点击查看代码
<template>
<s-search-form :items="searchItems">
<template #extra>
<el-button type="primary">拓展按钮</el-button>
</template>
</s-search-form>
</template>
<script>
export default {
data() {
return {
searchItems: [
{ label: "字段1", name: "field1", type: "text" },
{ label: "字段2", name: "field2", type: "text" },
{ label: "字段3", name: "field3", type: "text" },
{ label: "字段4", name: "field4", type: "text" },
{ label: "字段5", name: "field5", type: "text" },
{ label: "字段6", name: "field6", type: "text" }
]
};
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24