vue elementui 搜索数据时，一直返回全部数据，返回不了要查询的数据！求解答
<template>
<div class="app-container">
<el-form :inline="true" ref="queryForm" :model="queryParams">
<el-form-item label="名称" prop="deptName">
<el-input
v-model="queryParams.deptName"
placeholder="请输入名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="状态" clearable size="small">
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button
class="filter-item"
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
class="filter-item"
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:dept:add']"
>新增</el-button>
<el-button
class="filter-item"
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleUpdateDeptCache"
v-hasPermi="['system:deptcache:update']"
>更新缓存</el-button>
</el-form-item>
</el-form>
<el-table
border
v-loading="loading"
:data="deptList"
row-key="deptId"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="deptName" label="名称" min-width="300" :show-overflow-tooltip="true" />
<el-table-column prop="deptCode" label="编号" width="80" :show-overflow-tooltip="true"/>
<el-table-column prop="leader" label="负责人" width="80" :show-overflow-tooltip="true"/>
<el-table-column prop="phone" label="电话" width="110" :show-overflow-tooltip="true"/>
<el-table-column prop="email" label="邮箱" width="110" :show-overflow-tooltip="true"/>
<el-table-column prop="orderNum" label="排序" width="50" :show-overflow-tooltip="true"/>
<el-table-column prop="status" label="状态" :formatter="statusFormat" width="80" align="center" :show-overflow-tooltip="true"/>
<el-table-column prop="createBy" label="创建人" width="80" />
<el-table-column label="创建时间" prop="createTime" min-width="160" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="120" fixed="right">
<template slot-scope="scope">
<div class="flex items-center justify-center">
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:dept:edit']"
>修改
<span class="vertical-bar" style="color: #888888">|</span>
</el-button>
<el-button
size="mini"
type="text"
@click="handleAdd(scope.row)"
v-hasPermi="['system:dept:add']"
>新增
<span class="vertical-bar" style="color: #888888">|</span>
</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
v-hasPermi="['system:dept:remove']"
>删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<!-- 添加或修改部门对话框 -->
<el-dialog :title="title" :visible.sync="open" width="860px" class="myDialog">
<div style="height:380px;">
<el-row style="margin-top:-36px; margin-left: -20px;margin-right: -20px"><el-divider ></el-divider></el-row>
<el-tabs style="margin-top:-15px;box-shadow: none" v-model="activeName" type="border-card" >
<el-tab-pane label="基本信息" name="menu">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="编号" prop="deptName">
<el-input v-model="form.deptCode" placeholder="请输入编号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" style="width: 100%;"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictValue"
>{{ dict.dictLabel }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
</el-tabs>
<el-row style="margin-left: -20px;margin-right: -20px;margin-top: -15px;height: 10px" ><el-divider ></el-divider></el-row>
<div slot="footer" class="dialog-footer" style="height: 35px; margin-top: 25px;margin-left: 83%;" >
<el-button size="mini" @click="cancel">取 消</el-button>
<el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { listDept, getDept, delDept, addDept, updateDept, updateDeptCache } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
name : 'Dept',
components: { Treeselect },
data() {
return {
activeName: 'menu',
// 遮罩层
loading : true,
// 表格树数据
deptList : [],
// 部门树选项
deptOptions : [],
// 弹出层标题
title : '',
// 是否显示弹出层
open : false,
// 状态数据字典
statusOptions: [],
// 组织名称
deptName : undefined,
// 查询参数
queryParams : {
deptName: undefined,
status : undefined,
},
// 表单参数
form : {},
// 表单校验
rules: {
/*
parentId: [
{ required: false, message: "上级部门不能为空", trigger: "blur" }
],
*/
deptName: [
{ required: true, message: '名称不能为空', trigger: 'blur' }
],
orderNum: [
{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }
],
email: [
{
type : 'email',
message: "'请输入正确的邮箱地址",
trigger: ['blur', 'change']
}
],
phone: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: '请输入正确的手机号码',
trigger: 'blur'
}
]
}
}
},
created() {
this.getList()
this.getTreeselect()
this.getDicts('sys_normal_disable').then(response => {
this.statusOptions = response.data
})
},
methods: {
/** 查询部门列表 */
getList() {
this.loading = true
listDept(this.queryParams).then(response => {
this.deptList = this.handleTree(response.data, 'deptId')
this.loading = false
})
},
/** 转换部门数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id : node.deptId,
label : node.deptName,
children: node.children
}
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
/** 查询部门下拉树结构 */
getTreeselect() {
listDept().then(response => {
this.deptOptions = this.handleTree(response.data, 'deptId')
this.deptOptions = response.data
})
},
// 字典状态字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status)
},
// 取消按钮
cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
deptId : undefined,
parentId: undefined,
deptName: undefined,
deptCode: undefined,
orderNum: undefined,
leader : undefined,
phone : undefined,
email : undefined,
status : '0'
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 新增按钮操作 */
handleAdd(row) {
this.reset()
this.getTreeselect()
if (row != undefined) {
this.form.parentId = row.deptId
}
this.open = true
this.title = '添加部门'
},
handleUpdateDeptCache() {
updateDeptCache().then(response => {
if (response.code === 200) {
this.msgSuccess('更新成功')
} else {
this.msgError('更新失败')
}
})
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
this.getTreeselect()
getDept(row.deptId).then(response => {
this.form = response.data
this.open = true
this.title = '修改部门'
})
},
/** 提交按钮 */
submitForm: function () {
this.$refs.form.validate(valid => {
if (valid) {
if (this.form.deptId != undefined) {
updateDept(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess('修改成功')
this.open = false
this.getList()
} else {
this.msgError(response.message)
}
})
} else {
if (!this.form.parentId) this.form.parentId = '0'
addDept(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess('新增成功')
this.open = false
this.getList()
} else {
this.msgError(response.message)
}
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText : '取消',
type : 'warning'
}).then(function () {
return delDept(row.deptId)
}).then(() => {
this.getList()
this.msgSuccess('删除成功')
}).catch(function () {})
}
}
}
</script>
<style lang="stylus">
.myDialog .el-dialog__header {
height:40px;
font-weight: bold;
padding: 20px !important;
}
</style>
