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是存的数据

四：分页：

• 后端分页:

<el-pagination
    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"
>
</el-pagination>

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})
}

• 前端分页，后端只返回总数据:(就是拿到后端返回的所有数据通过分页将数据进行分割，再将分割好了之后的数据放入表格中通过表格展示。)

<el-table :data="newOrgListData">
</el-table>

<el-pagination
    background
    layout="prev, pager, next"
    :total="orgListData.length"
    :page-size="5"
    :current-page.sync="currentPage"
    @current-change="handleCurrentChange"
    prev-text="上一页"
    next-text="下一页"
></el-pagination>

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
    },

五：表格自定义内容：

<el-table-column label = "序号" fixed>
    <template slot-scope = "scoped">
        <span>{{scope.$index + (tableList.pagination.startRow + 1)}}</span>
    </template>
</el-table-column>

<el-table-column label = "日期">
    <template slot-scope = "scoped">
        <span>{{scope.row.createTime}}</span>
    </template>
</el-table-column>

六：表单提交：

1. 确认添加成功时使用以下两个：清空:this.addRoleForm = Object.assign({},{})，重置必填的校验:this.$refs[‘addRoleForm’].resetFields()。写在请求成功后的里面。
2. :label为展示在页面的数据，也是v-model对应的。

3. 获取下拉列表几个值的方法：
   (1).filter(const roleCode = this.下拉列表数据.filter(item => item => item.xxx == this.想匹配的数据.bbb))[0]。
   (2). 在el-select中加 @change=”xxx”>

   xxx(val){
       clg(val)
   }
   

七：Tab切换：

<keep-alive>  //减少性能消耗
    <div class="tabs">
        <span v-for="(item,index) in tabItems"
            :class="{'on':currentTab === index}"
            @click="changeTab(item,index)
            :key="index">{{item.name}}
        </span>
    </div>
</keep-alive>

data() {
    tabItems: [{},{}],
    currentTab: 0
}

changeTab(item,index) {
    this.currentTab = index
}

更多请参考我的博客