网站制作 天津,wordpress统计插件WP,苏州网站建设科技有限公司,北京好的网页设计目录在此先列出解决了那些问题#xff0c;以防读者看完了没有用处#xff1a;1、示例#xff0c;最基础的使用方法2、传参#xff0c;传多个值的方式3、默认值4、清空重置无效5、可搜索的用法及如何限制搜索字符长度一、示例html:{{item.name}}js:data: {formSend: {name: …目录在此先列出解决了那些问题以防读者看完了没有用处1、示例最基础的使用方法2、传参传多个值的方式3、默认值4、清空重置无效5、可搜索的用法及如何限制搜索字符长度一、示例html:{{item.name}}js:data: {formSend: {name: ,code: },dataList: [{id: 1,name: 中国,code: china}]},methods: {getItemValue(val) {// 当下拉框的值改变后这里可以通过改变的值向后台发送请求获取其他数据。// 可以通过函数默认的返回值 val 获取到下拉框选中的值// 也可以通过select绑定的值 this.formSend.code 获取到下拉框选中的值},}二、传参获取多个与选项相关的值1、同时获取option绑定值和显示值一个下拉框下拉列表里面option显示一个值绑定一个值select上面绑定的值是选中的option绑定的值一般情况向后台发送select绑定的值就可以了但是现在要求把选中的option显示的那个值也同时发送给后台。解决方法通过on-change方法来获取选中的列表项的文本默认情况下这个方法返回的是选中的绑定值但iview提供了一个label-in-value属性可以让显示的label和绑定的value值同时返回。返回的是一个对象通过属性来获取想要的值。html:{{item.name}}js:data: {formSend: {name: ,code: },dataList: [{id: 1,name: 中国,code: china}]},methods: {getItemName (val) {this.formSend.name val.label// 这里直接获取显示的值就可以了绑定的值可以通过select上面绑定的值取得},}2、传参需要选中项的多个相关值解决方式一在option上添加点击事件通过点击事件传参来获取更多值。注意在点击事件上加修饰符.native否则事件不生效。html:{{item.name}}js:data: {formSend: {name: ,code: ,id: },dataList: [{id: 1,name: 中国,code: china}]},methods: {getMoreParams (obj) {this.formSend.name obj.namethis.formSend.id obj.id},}解决方式二只向后台传递一个参数但是这个参数包含了多个相关的值是一个多值通过特殊符号(逗号冒号等)拼接成的字符串后台再以相应的顺序解析参数(与后台沟通)。html:{{item.name}}js:data: {formSend: {code: ,id: },dataList: [{id: 1,name: 中国,code: china}]},三、设置默认值单一默认值如果是固定的默认值只需要在data中定义变量的时候设置即可将select绑定的值设置为option的value值{{item.name}}data: {formSend: {code: China},dataList: [{id: 1,name: 中国,code: China}, {id: 2,name: 美国,code: America}]},动态默认值如果是动态的根据某个不确定的值来设置不同的默认值就需要搞事情了。需求判断某个日期是不是今天1、如果是今天需要判断当前时间如果当前时间小于14点则将默认时间设置为14点同时时间数组为当前时间后的整点开始到次日6点 (小于6点则从6点开始)如果当前时间大于14点则将默认时间设置为当前时间后的整点同时时间数组为当前时间后的整点开始到次日6点2、如果不是今天将默认时间设置为14点同时时间数组为从6点到次日6点代码{{ item.timeShow }}data: {arriveLateTime: ,arriveLateTimeArr: [{timeSend: 1300, timeShow: 13:00}]},methods: {setTimeArr (val) {// 今天if (new Date().toLocaleDateString() new Date(val).toLocaleDateString()) {var nowHour new Date().getHours()if (nowHour 6) {nowHour 6}else {nowHour}this.arriveLateTimeArr []for( ; nowHour24; nowHour) {this.arriveLateTimeArr.push({timeSend: nowHour10 ? 0nowHour00 : nowHour00,timeShow: nowHour10 ? 0nowHour:00 : nowHour:00,})}this.arriveLateTimeArr.push({ timeSend: 2359, timeShow: 23:59 },{ timeSend: 0100, timeShow: 次日01:00 },{ timeSend: 0200, timeShow: 次日02:00 },{ timeSend: 0300, timeShow: 次日03:00 },{ timeSend: 0400, timeShow: 次日04:00 },{ timeSend: 0500, timeShow: 次日05:00 },{ timeSend: Y0600, timeShow: 次日06:00 })// 非今天}else {this.arriveLateTimeArr [{ timeSend: 0600, timeShow: 06:00 },// ...省略{ timeSend: Y0600, timeShow: 次日06:00 }]}},setDefaultTime (val) {// 今天if (new Date().toLocaleDateString() new Date(val).toLocaleDateString()) {var nowTime new Date().getHours()if (nowTime 14) {this.arriveLateTime 1400}else {nowTimethis.arriveLateTime nowTime00}// 非今天}else {this.arriveLateTime 1400}}}重点在这里最初的时候我把设置默认值和设置option数组的逻辑写在了一起在created生命周期中调用设置默认值并没有起作用。后来将设置默认值和设置option数组分开来写在created生命周期中设置option数组在mounted生命周期中设置默认值此时设置默认值才生效。created () {this.setTimeArr(2018-10-20)},mounted () {this.setDefaultTime(2018-10-20)},(后期补充现在想来也许用this.$nextTick应该也是可以的只要赋值数组与赋值默认值不同时期即可未尝试此为后期补充文章时的想法)四、设置清空重置无效这种情况下通常是使用form表单的清空方法无效{{item.name}}方式一 select的清空重置方法this.$refs.resetSelect.clearSingleSelect()方式二 手动将select的查询条件赋值为空this.$refs.resetSelect.query 方式三 设置select的查询词仅在可搜索的情况下可使用this.$refs.resetSelect.setQuery()五、可搜索前端搜索普通用法只需添加一个filterable属性即可{{item.name}}设置搜索词最大长度这里使用了搜索词改变的方法当搜索词改变后判断它的长度如果大于指定的长度就将它截取。重新赋值赋值的方法两种都可以。有个问题是本来我以为selectDOM是个对象但是有时候却为数组(在不同页面使用)并没有去深究原因只是做了判断类型。{{item.name}}data: {formSend: {name: ,code: },dataList: [{id: 1,name: 中国,code: china}]},methods: {queryChange (query) {if (query.length 50) {let tempQuery query.substring(0, 50);this.$nextTick(() {// 数组if (Array.isArray(this.$refs.querySelect)) {// this.$refs.querySelect[0].query tempQuerythis.$refs.querySelect[0].setQuery(tempQuery)// 对象}else if (typeof this.$refs.querySelect object) {this.$refs.querySelect.query tempQuery// this.$refs.querySelect.setQuery(tempQuery)}})}},}后端搜索用到了lodash做防抖使用后端接口做远程搜索import _ from lodashv-modelformUser.namefilterablelabel-in-valueremote:remote-methodfindUser:loadinguserFindingon-changeuserSelectnot-found-text{{item.name}}dataformUser: {name: ,},userFindArr: [], // 人员数组userFinding: false, // 搜索用户methods// 搜索用户findUser: _.debounce( function (val) {this.userFinding true;setTimeout(() {this.userFinding false;const params {inputText: val}api.roleManage.roleFindSelect(params).then(res {if (res.status 200) {this.userFindArr res.data || []}})}, 200)}, 500),// 选择用户,当绑定的值为id,显示的值为name时。// 当选择结果后会出现短暂的显示id然后显示name// 解决当改变后用选择的名字进行再次搜索此时显示的就是名字userSelect (obj) {console.log(select, obj)if (obj null) {return false}this.findUser(obj.label)},网站导航
