achieve effect
Multiple conditions to realize the query of data in the database
front page code
An object such as dVO is introduced here, which corresponds to the DVO class in the background
<el-form :inline="true" :model="dVO" class="demo-form-inline">
<el-form-item label="部门" label-width="70px">
<el-select clearable v-model="dVO.departmentId" placeholder="请选择">
<el-option
v-for="item in departments"
:key="item.id"
:label="item.name"
:value="item.id">
<span style="float: left">{
{
item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">
<span class="el-tag el-tag--success el-tag--mini el-tag--plain">{
{
item.deptCount }}</span>
</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="用户名" label-width="70px">
<el-input clearable v-model="dVO.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="邮箱" label-width="70px">
<el-input clearable v-model="dVO.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label-width="70px">
<el-radio v-model="dVO.sex" label="0">男</el-radio>
<el-radio v-model="dVO.sex" label="1">女</el-radio>
<el-radio v-model="dVO.sex" label="">全部</el-radio>
<!-- <el-button type="primary" @click="onSubmit">查询</el-button>-->
</el-form-item>
<el-form-item label="昵称" label-width="70px">
<el-input clearable v-model="dVO.nickname" placeholder="请输入昵称"></el-input>
</el-form-item>
<el-form-item style="margin-left: 10px">
<el-button icon="el-icon-refresh" @click="resetDVO">重置</el-button>
<el-button type="primary" icon="el-icon-search" @click="getDList">查询</el-button>
<el-button type="success" icon="el-icon-plus">添加</el-button>
<el-button type="warning" icon="el-icon-download">导出</el-button>
</el-form-item>
</el-form>
JS code
//该部分增加 dVO 列表，对应名字尽量和后台中dVO类属性一致
data () {
return {
dVO: {
departmentId: '',
username: '',
email: '',
sex: '1',
nickname: ''
},
// 用户集合
dList: [],
// 部门集合
deptList: [],
// currentPage4: 4,
// 每页显示条数
size: 6,
// 总条数
total: 100,
// 当前页码
current: 1,
departments: [],
value: ''
}
},
// method 中设置 resetDoctorVO 方法
methods: {
async getDList(){
const {
data} = await findDList(this.current,this.size,this.dVO)
/* console.log(data); */
this.dList = data.data.records
this.total = data.data.total
},
// 重置查询
resetDVO(){
this.dVO.departmentId=''
this.dVO.username=''
this.dVO.sex=''
this.dVO.nickname=''
this.dVO.email=''
this.getDList()
}
}