使用ant-desgin-vue框架开发

前言：在我的前端开发过程中，你用过饿了么ui框架，iview，antd-desgin(react)，vant，uni-app，没用过antbefore-desgin-vue，不知道有多少人用这个框架，反正用着不舒服。下面简单介绍使用其表单、分页、弹窗组件的最简单需求，结合接口实现增删改查。从"../components/addUser.vue"导入AddUser；从"../components/editUser.vue"导入editUser；从"../components/authorityModify"importauthorityModify1from"../components/authorityModify1"exportdefault{name:"index",components:{AddUser,editUser,authorityModify,authorityModify1},data(){return{modelProps:{modelSwitch:false,},editUserProps:{name:"",remark:"",modelSwitch:false,},authorityProps:{modelSwitch:false,},searchvalue:"",current:1,selectedRowKeys:[],pagination:{defaultCurrent:1,//默认当前页码defaultPageSize:10,//默认每页显示大小showSizeChanger:true,//显示可以改变每页页数pageSizeOptions:["10","20","30","40"],//每页数量选项showTotal:(total)=>`Total${total}items`,//显示总数onShowSizeChange:(defaultCurrent,defaultPageSize)=>(this.defaultPageSize=defaultPageSize),////每页数量变化时更新显示},columns:[{dataIndex:"index",key:"serialnumber",title:"serialnumber",customRender:(text,record,index)=>`${(this.pagination.defaultCurrent-1)*this.pagination.defaultPageSize+index+1}`,},{title:"Username",dataIndex:"name",key:"name",scopedSlots:{customRender:"name"},},{title:"添加时间",dataIndex:"createDate",key:"createDate",scopedSlots:{customRender:"createDate"},},{title:"用户描述",key:"remark",dataIndex:"remark",scopedSlots:{customRender:"remark"},},{title:"Operation",key:"action",scopedSlots:{customRender:"action"},},],data:[],};},mounted(){this.getUserList();this.getUserPagination();},methods:{//authority:权限(){console.log("权限修改");this.authorityProps.modelSwitch=true;},//deleteremoveInfo(id){consturl="/api/user/delete";constids=[];ids.push(id.id);console.log(ids,"000");//让obj={};//obj=ids;this.$Ajax.post(url,{value:ids}).then((e)=>{if(e.success){console.log("删除成功");this.getUserList();}});},//获取输入框的输入值getInputValue(value){console.log(value,'9999');},//addUser添加弹框展示广告dUser(){console.log("addUser");this.modelProps.modelSwitch=true;},//分页时间触发的方法handleTableChange(pagination){console.log(pagination,'分页信息里的东西');this.pagination.defaultCurrent=pagination.defaultCurrent;this.pagination.pageSize=pagination.pageSize;//this.queryParam.page=pagination.current;//this.queryParam.size=pagination.pageSize;这个.getUserList();this.getUserPagination();},//重置:reset(){this.searchvalue="";},//查询用户数据gotoSearch(searchvalue){console.log(this.searchvalue,"searchvaluevalue");consturl="/api/user/queryPage";constgetData={name:"name",value:this.searchvalue};if(this.searchvalue==“”){this.getUserList();}else{this.$Ajax.post(url,getData).then((e)=>{if(e.success){console.log(e.result,"success");this.data=e.result.l是;this.pagination.defaultCurrent=e.result.page.pageNo;this.pagination.pageSize=e.result.page.pageSize;}});}},//查询用户设置数据列表getUserList(){consturl1="/api/user/queryList"//consturl="/api/user/queryPage";constgetData={name:this.searchvalue,};//constname=this.searchvalue;this.$Ajax.post(url1,getData).then((e)=>{if(e.success){console.log(e.result,"success");this.data=e.result;//this.pagination.defaultCurrent=e.result.page.pageNo;//this.pagination.pageSize=e.result.page.pageSize;}});},//查询页面getUserPagination(){consturl="/api/user/queryPage";constgetData={name:this.searchvalue,};this.$Ajax.post(url,getData).then((e)=>{if(e.success){console.log(e.result,"success");this.pagination.defaultCurrent=e.result.page.pageNo;this.pagination.pageSize=e.result.page.pageSize;}});},//修改fixfunc(row){console.log(row,"9999");this.editUserProps.modelSwitch=true;this.editUserProps.name=row.name;this.editUserProps.remark=row.remark;this.editUserProps.id=row.id;},onSelectChange(selectedRowKeys){console.log("selectedRowKeys改变了:",selectedRowKeys);this.selectedRowKeys=selectedRowKeys;},},};效果如图：