element ui 表格筛选组件封装
<template>
<div class="pd1315">
<el-form
ref="queryForm"
:inline="true"
:model="queryForm"
class="demo-form-inline"
>
<--表单内容自行定义，以下为模板展示->
<el-form-item
v-if=""
label="姓名:"
>
<el-input
v-model=""
placeholder="请输入"
/>
</el-form-item>
<el-form-item
v-if="defaultQueryForm.role_id"
label="角色:"
>
<el-select
v-model="queryForm.role_id"
placeholder="请选择"
clearable
>
<el-option
v-for="item in roleList"
:key=""
:label=""
:value=""
/>
</el-select>
</el-form-item>
<el-form-item
v-if=""
label="省/市/区:"
>
<el-cascader
clearable
:options="areaList"
:props="areaProps"
@change="handleArea"
/>
</el-form-item>
<el-form-item
v-if="defaultQueryForm.created_at"
label="注册时间:"
>
<el-date-picker
v-model="queryForm.created_at"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="submitForm"
>搜索</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
<!-- <div class="line" /> -->
</div>
</template>
<script>
import { commonMixin } from '@/mixins/commonMixin'
export default {
mixins: [commonMixin],
props: {
defaultQueryForm: {
type: Object,
default: () => { }
}
},
data() {
return {
queryForm: {},
areaList: [], // 地区数据
roleList: [], //角色数据
}
},
mounted() {
},
methods: {
//搜索事件
submitForm() {
this.$refs.queryForm.validate((valid) => {
if (valid) {
console.log(this.queryForm)
this.$emit('search', this.queryForm)
} else {
console.log('error submit!!')
return false
}
})
},
//重置事件
resetForm() {
this.$refs.queryForm.resetFields()
this.queryForm = {}
this.$emit('search', this.queryForm)
}
}
}
</script>
<style scoped>
.line{
border-bottom: 1px solid #f0f0f0;
margin: 10px 0;
}
</style>