新建GSearchQuery.vue
<template>
<el-row :span="24>
<el-input type="text" v-model="query"></el-input>
<slot></slot>
</el-row>
</template>
data() {
return{
query:''
}}
index.vue 引入组件
<GSearchQuery></GSearchQuery>
组件全局声明
plugin下
继续封装组件
GSearchQuery.vue下
watch: {
query() {
this.debounceQuery();
}
}
name: 'GSearchQuery'
data() {
return {
query:' '
}}
methods: {
debounceQuery: debounce(() => {
// this.loadLoanByPage(1);
console.log('准备查询')
},1000)
}}
el-input 加
placeholder = "请输入名称"
<style scoped>
.el-row {
margin-bottom:10px
}
</style>
index 下
<GSearchQuery>
<template v-slot = "{q}">
<el-button @click="doQuery(prop)">搜索</el-button>
</template>
</GSearchQuery>
<slot :q="query"></slot>
doQuery(query){
console.log()
}
:span = "$scopedSlots.default?22:24"
使用混入优化分页代码量
该名称
input-manager下的
index.vue
import {pager} from '@/mixins'
mixins:[paper]
创建mixins文件
pager.js
index
//* 是一个模块， {default,具名导出}
export {default as pager } from './pager'
pager下
参数改动如下：
pageSizes:[10,20,30,40],
pageSize:10,
query:'',
total:0,
setTotal(total) {
this.total = total;
}
computed: {
frontPageOptions(){
return {
currentPage:this.currentPage,
pageSize:this.pageSize,
pageSizes: this.pageSize,
query:this.query
total:this.total
}
}
input-manager 下index
:pageOptions = "frontPageOptions"
// 后端访问数据参数
getApiPager() {
return {
pageNo:this.currentPage,
pageSize:this.page,
name:this.query
}}
let params = {
pageNo:this.currentPage,
pageSize:this.page,
}
if(this.query && this.query.trim() != " "){
params.name = this.query;
}
return params;
crud.js
export deault {
methods: {
init(){
// 数据初始化
}}}
细节优化
1、每次查询时候的小问题
拦截器request下
if(response?.data?.code === 20000) {
if(typeof response?.data?.data === 'string'); // 新增
Message.success(response?.data?.data);
return response;
}
2 表格很丑
==GTable.vue ==
// gOptions 下的height 删掉
loanListConf.js
// option下的height 删掉
this指向问题
pageOptions、options下的箭头函数换成普通函数
input-manager下
按钮编辑下添加@click = “showEdit()”
数据怎么传输进来的呢？
<template v-slot = "{ row }">
<el-button @click="showEdit(row)" type="primary">编辑</el-button>
</template>
方法下新建方法showEdit()
showEdit(row) {
console.log('当前行L',row)
}
添加弹窗
element下
Dialog
<el-dialog
title = "编辑申请"
:visible.sync = "dialogBisible"
width="30%">
<span>这是一段信息</span>
<span slot = "footer">
<el-button @click = "dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
在data中声明dialogBisible，默认值是false
在showEdit函数下，添加
this.dialogBisible = true;
<el-dialog
title = "编辑申请"
:visible.sync = "dialogBisible"
width="30%">
<GFormCreator :conf="editConf" @submit = "save"></GFormCreator>
<span slot = "footer">
<el-button @click = "dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
添加save方法
save(data) {
console.log('保存数据',data)
}
data下声明editConf: {}
showEdit() 下
this.editCof = {
items:[
[{ label:'姓名',value:row.name}],
[{label:'性别',value:row.sex,options:[
{label:'男' :value:'1'},
{label:'女' :value:'2'},
]}]]}
conf下 加了export
在inputPageConf.js下引入
import {sexOptions,companyOptions, marriageOptions, educationOptions } from '@/conf';
在input-manager的index下
import { sexOptions } from '@/conf'
showEdit() 下
this.editConf = {
items: [
[{type:'input',key:'name' ,label:'姓名',value: row.name}],
[{ type:'select',key:'sex',label:' 姓名 ', value： row.sex,
options: sexOptions }]
]
}
表单没有写验证
接着写
rules:[
name:[{required:true,message:'必须填写用户名'}],
sex:[{required:true,message:'必须填写性别'}]
]
删除这个页面下的提交和重置，重复了
colspan:20
GFormCreator.vue 下的样式添加
.el-select,.el-input {
width:100%;
}
不管哪一行都弹出下图
不会销毁组件，淡入淡出？
methods下
save方法下
save(data) {
this.dialogVisible = false;
this.$notify.success({
title:'Info',
message:'保存成功',
showClose:false
});}
<el-dialog
title = "编辑申请"
:visible.sync = "dialogBisible"
width="30%">
<GFormCreator v-if="exist" :conf="editConf" @submit = "save"></GFormCreator>
</el-dialog>
data声明
销毁子组件，控制组件的生命周期
@open="exist=true"
@closed="exist=false"
:key="Math.random()"
key永远不相同
