element 问号_Vue+Element-UI 常用功能

引言

在实际项目过程中有很多基本的功能经常会遇到，因此统一收集一下可以更好地进行理解。

正文

一：链接跳转传参(单页面)

法一(带问号的)：

传：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

}

更多请参考我的博客