uni-app实现薪资区间范围选择

templete:

<uni-forms-item label="期望薪资" name="intention_salary" class="salary_input">
                            <u--input v-model="checkVal" placeholder="请选择(选填)" readonly border="bottom"
                                placeholderStyle="color:#999;font-size:13px;" clearable @tap="pickerShow=true">
                            </u--input>
                            <u-picker class="language_picker" :show="pickerShow" ref="uPicker" :columns="columns"
                                @confirm="confirm" @change="changeHandler" @cancel="changeHandler=false;">
                            </u-picker>
                            <u-icon name="arrow-right" icon="#999" size="15"></u-icon>
                        </uni-forms-item>

js:

<script>
export default {
data() {
            return {

pickerShow:false,

columns: [ [], [] ], // 薪资第一列  columnData: [ [], [] ], // 薪资第二列 checkVal: '', // 当前选择的薪资 } }, methods:{ /* change薪资 */ changeHandler(e) { const { columnIndex, index, // 微信小程序无法将picker实例传出来，只能通过ref操作 picker = this.$refs.uPicker } = e; // console.log('选择:', e); switch (index) { case 0: picker.setColumnValues(1, e.value); break; default: let dbArray = []; let _val = e.indexs[0]; let _all if(_val <= 50){ //50或以下 for (let i=_val+1;i<=_val*2;i++) { dbArray.push(i) } }else{//50以上 for (let i=_val+10;i<= _val+50 && i<=260;i+=10) { dbArray.push(i); }; } for (let i = 0; i < dbArray.length; i++) { let num = Number(index); dbArray[i] += num; dbArray[i] += "K"; } picker.setColumnValues(1, dbArray); break; } }, // 确定薪资  confirm(e) { this.pickerShow = false; let _result = e.value[0] + '-' + e.value[1]; if (e.value[0] == '面议') { _result = e.value[0]; } this.signUpformData_intention.intention_salary = this.checkVal = _result; // console.log('_result', _result);  }, } } </script>

标签：picker,index,val,default,app,let,薪资,uni
来源： https://www.cnblogs.com/LindaBlog/p/16336604.html