项目交互-选择器交互

选择器交互

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)
                }
            })
        }
相关推荐
你挚爱的强哥2 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森36 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy37 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891140 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript