项目交互-选择器交互

选择器交互

javascript 复制代码
<div>
    <el-select v-model="valueOne" placeholder="年级">
       <el-option v-for="item in optionsOne" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId">
       </el-option>
    </el-select>
    <el-select v-model="valueTwo" placeholder="班级">
       <el-option v-for="item in optionsTwo" :key="item.classId" :label="item.className" :value="item.classId">
       </el-option>
    </el-select>
</div>
javascript 复制代码
data () {
    return {
        valueOne: '',
        valueTwo: '',
        gradeId: 4,
        optionsOne: [],
        optionsTwo: [],
    }
}

1.写接口

(api)(@/api/user/index.js)

javascript 复制代码
// 查询年级列表
export function searchGradeLists (query) {
    return request({
        url: '/system/grade/common/list',//接口
        method: 'get',
        params: query
    })
}

// 查询班级列表
export function searchClassList (query) {
    return request({
        url: '/system/class/list',
        method: 'get',
        params: query,
    })
}

2.在组件中导入接口

javascript 复制代码
import {
    searchGradeLists,
    searchClassList,
} from '@/api/user/index'

3.调用接口

因为年级选择器一加载页面就应该有数据可以选择,所以需要挂载的时候请求数据

javascript 复制代码
mounted () {
   // 因为一加载页面就应该有数据
   // 查询年级列表
   searchGradeLists({ pageNum: 1, pageSize: 10 }).then(res => {
      console.log(res, '哈哈哈哈哈')
      this.optionsOne = res.rows
   })
},

4.不能直接像选择班级一样请求接口

虽然请求年级的数据成功了,现在需要请求班级的数据,但是由于班级的数据的显示是当前选择的年级对应的所有班级。所以选择班级不能直接像选择班级一样请求接口。

解决:在element-ui中,选中值发生变化时会触发change事件,所以取到当前所选的年级。如下:

4.1给el-select标签绑定change事件

javascript 复制代码
<div>
    <el-select v-model="valueOne" placeholder="年级">
       <el-option v-for="item in optionsOne" :key="item.gradeId" :label="item.gradeName" :value="item.gradeId">
       </el-option>
    </el-select>
    <el-select v-model="valueTwo" placeholder="班级">
       <el-option v-for="item in optionsTwo" :key="item.classId" :label="item.className" :value="item.classId">
       </el-option>
    </el-select>
</div>

4.2因为选择年级后返回e

javascript 复制代码
methods: {
    // 选择年级
    handleChangeGrade (e) {
        console.log(e, '。。')
        console.log(this.gradeId, 'idid')
        this.gradeId = e
        console.log(this.gradeId, ';;;')
        console.log(e, '././')
    },
}

查看控制台发现选择年级触发的change事件返回的e是gradeId。因此将e赋值给this.gradeId(这个this.gradeId是data里面设置的gradeId)

4.3将返回的gradeId传给请求查询班级的接口

接下来,点击班级选择器时,应该显示年级对应的所有班级(利用change事件返回的gradeId),所以需要将返回的gradeId传给请求查询班级的接口

javascript 复制代码
methods: {
    // 选择年级
    handleChangeGrade (e) {
        console.log(e, '。。')
        console.log(this.gradeId, 'idid')
        this.gradeId = e
        console.log(this.gradeId, ';;;')
        console.log(e, '././')


        // 新加的代码
        // 先清空数组
        this.valueTwo = '' //注意需要清空一下第二个选择器的数据
        // 将gradeId传给查询班级的方法,并调用这个方法
        this.requestClassList(e)
    },


    // 新加的代码
    // 查询班级(查询年级对应的班级列表)
    requestClassList (e) {
        console.log(e, '???')
        searchClassList({ pageNum: 1, pageSize: 10, gradeId: e }).then(res => {
            console.log(res, '嘻嘻嘻嘻嘻')
            this.optionsTwo = res.rows
        })
    }

    // 注意gradeId: e不能写出e,对象键值对
}

最后在第二个选择器也同理使用change方法,因为后面页面渲染事件需要用到。选择器交互成功!

下面补充选择班级的代码

复制代码
        // 选择班级   handleChangeClass是change事件
        handleChangeClass (e) {
            console.log(e, '123')
            // 查询教师列表
            this.searchUserList(e)
            // 查询学生列表

        },
        // 查询教师列表
        searchUserList (e) {
            searchUserList({ classId: e, pageNum: 1, pageSize: 10, }).then(res => {
                if (res.code == 200) {
                    console.log(res)
                }
            })
        }
相关推荐
SunTecTec20 分钟前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
涵信31 分钟前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
拉不动的猪1 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程2 小时前
ES练习册
java·前端·elasticsearch
Asthenia04122 小时前
Netty编解码器详解与实战
前端
袁煦丞2 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
Mr.app2 小时前
vue mixin混入与hook
vue.js
一个专注写代码的程序媛3 小时前
vue组件间通信
前端·javascript·vue.js
一笑code3 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员3 小时前
layui时间范围
前端·javascript·layui