引言
在实际项目过程中有很多基本的功能经常会遇到,因此统一收集一下可以更好地进行理解。
正文
一:链接跳转传参(单页面)
法一(带问号的):
传:this.$router.push({path: '', query: { 参数名:参数值}})
收:this.$route.query.参数名
法二(不带问号的):
传:this.$router.push({path:'/xx/xx' + val.vv})
收:this.$route.path.split('/').reverse()[0]
this.$router.push():跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个页面
法三/四:
this.$router.replace():不会有记录
this.$router.go(n):n可为正数可为负数。正数返回上一个页面,类似 window.history.go(n)
二:登录功能时,账号密码自动填充
在同域名下,chrome会进行自动填充?
当input = "password"的时候,会自动将前一个input默认为账号而填充;
解决: autoComplate = "off" 或者 autoComplate = "new-password"
三:SessionStorage存取使用:
存:sessionStorage.user = Json.stringify(res)
取:JSON.parse(sessionStorage.getItem('user'))
清除:sessionStorage.removeItem('user')
注:其中 user是可改的,res是存的数据
四:分页:
后端分页:
background
layout="prev,pager,next"
:total="tableList.pagination.totalRow"
@current-change="changePage"
:current-change.sync="tableList.pagination.pageIndex || 0"
:page-size="tableList.pagination.pageSize"
:page-count= "tableList.pagination.totalPage || 0"
>
userList(param) {
let params = {
"pageIndex": 1,
"pageSize": 10,
...param
}
userList(params).then((res) => {
if(res.data.code === 1000) {
const { pageIndex,pageSize,startRow,totalPages,totalRows,list} = res.data.data;
this.tableList.backStageUserList = list;
this.tableList.pagination = { pageIndex,pageSize,startRow,totalPages }
}
},(err) => {
this.$message.error(err)
})
}
changePage(page) {
this.userList({pageIndex: page})
}
前端分页,后端只返回总数据:(就是拿到后端返回的所有数据通过分页将数据进行分割,再将分割好了之后的数据放入表格中通过表格展示。)
background
layout="prev, pager, next"
:total="orgListData.length"
:page-size="5"
:current-page.sync="currentPage"
@current-change="handleCurrentChange"
prev-text="上一页"
next-text="下一页"
>
data() {
currentPage: 1,
newOrgListData: [],
orgListData: []
}
xxx().then((res) => {
if(res.data.code === 1000) {
this.orgListData = res.data.data
this.handleCurrentChange(1)
}
})
handleCurrentChange(index) { //currentPage变动时触发,index值为当前页
this.currentpageOrg = index
this.newOrgListData = this.orgListData.slice((index - 1) * 5, index * 5) //根据每页5条将初始数据orgListData进行裁剪赋值给新数组newOrgListData
},
五:表格自定义内容:
{{scope.$index + (tableList.pagination.startRow + 1)}}
{{scope.row.createTime}}
六:表单提交:
确认添加成功时使用以下两个:清空:this.addRoleForm = Object.assign({},{}),重置必填的校验:this.$refs['addRoleForm'].resetFields()。写在请求成功后的里面。
:label为展示在页面的数据,也是v-model对应的。
获取下拉列表几个值的方法:
(1).filter(const roleCode = this.下拉列表数据.filter(item => item => item.xxx == this.想匹配的数据.bbb))[0]。
(2). 在el-select中加 @change="xxx">
xxx(val){
clg(val)
}
七:Tab切换:
//减少性能消耗
:class="{'on':currentTab === index}"
@click="changeTab(item,index)
:key="index">{{item.name}}
data() {
tabItems: [{},{}],
currentTab: 0
}
changeTab(item,index) {
this.currentTab = index
}
更多请参考我的博客