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 = ids[0] }else{ //编辑---处理自己的逻辑 this.BianJiAccountForm.an_ids = ids[0] } 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++){ data[i]['id'] = data[i].an_id data[i]['name'] = data[i].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(lists[j] == this.UsersList[i].an_id){ //转换数据 id 和 name this.UsersList[i]['id'] = this.UsersList[i].an_id this.UsersList[i]['name'] = this.UsersList[i].an_name this.rightData.push(this.UsersList[i]) } } }
}, 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; } } }