vue + element 写查询检索框
1.先写一个检索用的弹窗:
点击设置的按键–会出现该弹窗
下面展示一些 内联代码片
。
<el-dialog title="弹窗名称" :visible.sync="chooseOrgVisible" :close-on-click-modal="true" :before-close="addEditFormOnClose" width="52%">
<el-form :inline="true" :model="queryTypeData">
<!-- 模糊查询 -->
<el-form-item label="名称">
<el-input
v-model="queryTypeData.fTypeCoce"
placeholder="请输入"
clearable
/>
</el-form-item>
<el-form-item label="名称">
<el-input
v-model="queryTypeData.fTypeName"
placeholder="请输入"
clearable
/>
</el-form-item>
<el-form-item label="有效性">
<el-select v-model="queryTypeData.fAuditStatus" clearable placeholder="所有" >
<el-option
v-for="item in audit_status"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<br/>
<!--查询按钮-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getTotalListData1()" :loading="listLoading1">查询</el-button>
</el-form-item>
<!--重置按钮-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="cleanQueryData1()">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="returnMember()" :disabled="isSelected">确认</el-button>
</el-form-item>
</el-form>
<!-- </el-col> -->
<!--列表-->
<el-table border :data="queryTypeResult" highlight-current-row v-loading="listLoading1" @row-click="rowClick" style="...">
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column prop="fTypeCoce" label="代码" min-width="200">
</el-table-column>
<el-table-column prop="fTypeName" label="名称" min-width="200">
</el-table-column>
<el-table-column prop="fAuditStatus" :formatter="row => transDic (row.fAuditStatus, audit_status)" label="有效性" min-width="120">
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="pagination1.pageNum" :page-sizes="pagination1.pageSizes" :page-size="pagination1.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination1.total">
</el-pagination>
</el-dialog>
2.需要写在下面的方法
methods :
cleanqueryinput () {
this.formData.fTypeCode = ''
this.formData.fTypeName = ''
this.$forceUpdate()
},
// 点击检索按钮
getfTypeCoce () {
this.getTypeListData()
this.chooseOrgVisible = true
},
// 弹窗关闭
addEditFormOnClose () {
this.queryTypeData.fTypeCoce = ''
this.queryTypeData.fTypeName = ''
this.queryTypeResult = []
this.chooseOrgVisible = false
this.isSelected = true
},
// 清空弹窗的输入框
cleanQueryData1 () {
this.queryTypeData.fTypeCoce = ''
this.queryTypeData.fTypeName = ''
this.queryTypeData.fAuditStatus = ''
},
// 选中行
rowClick (row, event, column) {
this.nowClickRow = row
this.isSelected = false
},
// 将弹窗数据赋值到查询输入框
returnMember ($index = 'empty') {
this.formData.fTypeCode = this.nowClickRow.fTypeCoce
this.formData.fTypeName = this.nowClickRow.fTypeName
this.queryTypeResult = []
this.chooseOrgVisible = false
this.isSelected = true
},
// 当前页面大小
handleSizeChange1 (num) {
this.pagination1.pageSize = this.queryTypeData.pageSize = num
this.getTypeListData()
},
// 当前page
handleCurrentChange1 (num) {
this.pagination1.pageNum = this.queryTypeData.pageNum = num
this.getTypeListData()
},
// 查询按钮
getTotalListData1 () {
this.isSelected = true
this.pagination1.pageNum = 1
this.getTypeListData()
},
// 查询方法
getTypeListData () {
this.updateEditSubmitLoading1 = true
this.listLoading1 = true
this.queryTypeData.pageNum = this.pagination1.pageNum
this.queryTypeData.pageSize = this.pagination1.pageSize
this.$http.post(this.API.getTypeConfigList, this.queryTypeData).then(response => {
console.log(response)
this.queryTypeResult = response.data.data.pag
this.pagination1.total = parseInt(response.data.data.total)
this.updateEditSubmitLoading1 = false
this.listLoading1 = false
}).catch((response) => {
console.error(response)
this.updateEditSubmitLoading1 = false
this.listLoading1 = false
this.$message.error('操作失败')
})
},