140 lines
3.0 KiB
Vue
140 lines
3.0 KiB
Vue
<cn>
|
||
#### 高级搜索
|
||
三列栅格式的表单排列方式，常用于数据表格的高级搜索。
|
||
有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
|
||
</cn>
|
||
|
||
<us>
|
||
#### Advanced search
|
||
Three columns layout is often used for advanced searching of data table.
|
||
Because the width of label is not fixed, you may need to adjust it by customizing its style.
|
||
</us>
|
||
|
||
<template>
|
||
<div id="components-form-demo-advanced-search">
|
||
<a-form
|
||
class="ant-advanced-search-form"
|
||
:form="form"
|
||
@submit="handleSearch"
|
||
>
|
||
<a-row :gutter="24">
|
||
<a-col
|
||
v-for="i in 10"
|
||
:key="i"
|
||
:span="8"
|
||
:style="{ display: i < count ? 'block' : 'none' }"
|
||
>
|
||
<a-form-item :label="`Field ${i}`">
|
||
<a-input
|
||
v-decorator="[
|
||
`field-${i}`,
|
||
{
|
||
rules: [{
|
||
required: true,
|
||
message: 'Input something!',
|
||
}],
|
||
}
|
||
]"
|
||
placeholder="placeholder"
|
||
/>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<a-col
|
||
:span="24"
|
||
:style="{ textAlign: 'right' }"
|
||
>
|
||
<a-button
|
||
type="primary"
|
||
html-type="submit"
|
||
>
|
||
Search
|
||
</a-button>
|
||
<a-button
|
||
:style="{ marginLeft: '8px' }"
|
||
@click="handleReset"
|
||
>
|
||
Clear
|
||
</a-button>
|
||
<a
|
||
:style="{ marginLeft: '8px', fontSize: '12px' }"
|
||
@click="toggle"
|
||
>
|
||
Collapse <a-icon :type="expand ? 'up' : 'down'" />
|
||
</a>
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
<div class="search-result-list">
|
||
Search Result List
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
expand: false,
|
||
form: this.$form.createForm(this, { name: 'advanced_search' }),
|
||
};
|
||
},
|
||
computed: {
|
||
count () {
|
||
return this.expand ? 11 : 7;
|
||
},
|
||
},
|
||
methods: {
|
||
handleSearch (e) {
|
||
e.preventDefault();
|
||
this.form.validateFields((error, values) => {
|
||
console.log('error', error);
|
||
console.log('Received values of form: ', values);
|
||
});
|
||
},
|
||
|
||
handleReset () {
|
||
this.form.resetFields();
|
||
},
|
||
|
||
toggle () {
|
||
this.expand = !this.expand;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.ant-advanced-search-form {
|
||
padding: 24px;
|
||
background: #fbfbfb;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.ant-advanced-search-form .ant-form-item {
|
||
display: flex;
|
||
}
|
||
|
||
.ant-advanced-search-form .ant-form-item-control-wrapper {
|
||
flex: 1;
|
||
}
|
||
|
||
#components-form-demo-advanced-search .ant-form {
|
||
max-width: none;
|
||
}
|
||
#components-form-demo-advanced-search .search-result-list {
|
||
margin-top: 16px;
|
||
border: 1px dashed #e9e9e9;
|
||
border-radius: 6px;
|
||
background-color: #fafafa;
|
||
min-height: 200px;
|
||
text-align: center;
|
||
padding-top: 80px;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
|