ltkefuxitongcyj v0.1.0
head 头部组件用法 组件已经全局挂载挂全局组件--main.js 1.<headdv @tapAddFun="tapAddFun" @SearchFun="SearchFun" @allDelFun="allDelFun" :headData="headData"> 2.return { //公共头部组件所需要的参数 headData:{ title:'后台账号列表', add:true, search:false, del:false, condition1:false, condition2:false, condition3:false, condition4:false, condition5:false, }, } 3.methods: { //头部组件促发的方法 //添加 tapAddFun(){ console.log('add') this.isShowAddForm = true }, //搜索方法 SearchFun(data){ console.log(data) }, //批量删除 allDelFun(){ console.log('del') }, //新加方法 自己添加 }
page 分页组件用法 组件已经全局挂载挂全局组件--main.js
1.<page :pageData="pageData" @changeSizeFun="handleSizeChange" @changeCurrentFun="handleCurrentChange">
2.return {
//分页
pageData:{
pagecount: 1, //总页数 ,默认1
pagesize: 10, //每页多少条 默认10
pageindex: 1, //当前页 默认1
count: 1,
},
}
3.methods: {
//获取数据后把对应的值 赋值到pageData
//分页
//pageSize 改变时会触发 每页条数
handleSizeChange(val) {
this.pageData.pagesize = val
this.getPackData();
},
//currentPage 改变时会触发 当前页
handleCurrentChange(val) {
this.pageData.pageindex = val
this.getPackData();
},
}
//删除弹窗公共组件 ---已经全局引入
<deldv :delDate="delDate" @determineDel="determineDel" @cancelDel="cancelDel"> 2.return { //删除弹窗 delDate:{ title:'删除账号', label:'删除数据不可恢复，确定删除？', status:false, }, } 3.methods: { //取消删除--子组件促发 cancelDel(){ this.delDate.status = false; }, //确定删除--子组件促发 determineDel(){ this.allDeleteEvent() } }
<headdv @tapAddFun="tapAddFun" @SearchFun="SearchFun" @allDelFun="allDelFun" :headData="headData">
<page :pageData="pageData" @changeSizeFun="handleSizeChange" @changeCurrentFun="handleCurrentChange">
<deldv :delDate="delDate" @determineDel="determineDel" @cancelDel="cancelDel">
//公共头部组件所需要的参数
headData:{
title:'后台账号列表',
add:true,
search:false,
del:false,
condition1:false,
condition2:false,
condition3:false,
condition4:false,
condition5:false,
},
//分页
pageData:{
pagecount: 1, //总页数 ,默认1
pagesize: 10, //每页多少条 默认10
pageindex: 1, //当前页 默认1
count: 1,
},
//删除弹窗
delDate:{
title:'删除账号',
label:'删除数据不可恢复，确定删除？',
status:false,
},
//头部组件促发的方法
//添加
tapAddFun(){
console.log('add')
this.isShowAddForm = true
},
//搜索方法
SearchFun(data){
console.log(data)
},
//批量删除
allDelFun(){
console.log('del')
},
//新加方法 自己添加
//分页
//pageSize 改变时会触发 每页条数
handleSizeChange(val) {
this.pageData.pagesize = val
this.getclasslist();
},
//currentPage 改变时会触发 当前页
handleCurrentChange(val) {
this.pageData.pageindex = val
this.getclasslist();
},
//取消删除--子组件促发
cancelDel(){
this.delDate.status = false;
},
//确定删除--子组件促发
determineDel(){
this.allDeleteEvent()
}//穿梭组件--自封装
1.<transfer @closeFun="closeFun" :title="transferTitle" :status='infotags_show_edit' :leftData='UsersList' :rightData='rightData' >
2.import transfer from '@/components/transfer'
3.components: {transfer},
4.return {
rightData:[], //选中数据--一般编辑时才有
isAdd:false,
UsersList: [], //数据库获取--转化后
transferTitle:'权限选择',
infotags_show_edit: false, //弹窗显示状态----选择弹窗
}
5.父组件的方法
//关闭弹窗
closeFun(ids){
if(this.isAdd){
//添加---处理自己的逻辑
this.addAccountForm.an_ids = ids0
}else{
//编辑---处理自己的逻辑
this.BianJiAccountForm.an_ids = ids0
}
this.infotags_show_edit = false;
},
6.//获取权限列表数据----获取到数据后一定要转换处理 id 和 name
getNodeList() {
//参数
let get = ${this.common.getData}&limit=${this.pagesize2}&page=${this.pageindex2}
this.https(this.apiList.getNodeList+${get}).then(response => {
if (response.data.code == this.common.code) {
let data = response.data.data.rows
//格式化数据，方便子组件处理
for(let i=0;i<data.length;i++){
datai = datai.an_id
datai = datai.an_name
}
this.UsersList = data; //列表数据
}
//弹窗提示
this.tc_element(response.data.msg,response.data.code,2,"获取列表")
}
);
},
7.//点击打开弹窗的事件--添加
Choice_infotags_add() {
this.isAdd = true
this.infotags_show_edit = true; //弹窗显示状态
},
8.//点击打开弹窗的事件--编辑弹窗
Choice_infotags_edit() {
this.isAdd = false
this.infotags_show_edit = true;
let lists = this.BianJiAccountForm.an_ids.split(',')
for(let i=0;i<this.UsersList.length;i++){
for(let j=0;j<lists.length;j++){
if(listsj == this.UsersListi.an_id){
//转换数据 id 和 name
this.UsersListi = this.UsersListi.an_id
this.UsersListi = this.UsersListi.an_name
this.rightData.push(this.UsersListi)
}
}
}
},
9.公共css文件
.btn-check{
margin-top:100px;
margin-bottom:20px;
}
.xuanhe_tc{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width:100%;
.el-dialog{
.el-dialog__body{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
}
}
4 years ago