vue + element 写查询检索框

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('操作失败')
      })
    },