<template> <view> <picker mode="multiSelector" :range="list" @columnchange="columnchange" @change="change"> <input :placeholder="placeholder" v-model="title" :disabled="true" placeholder-class="pc" /> <view class="icon more" v-if="icon"></view> </picker> </view> </template> <script> export default { name: 'multiSelector', props: { range: { type: Array }, name: { type: String, default: '时间段' }, icon: { type: Boolean, default: true }, placeholder: { type: String, default: '请选择' }, value: { type: String } }, data() { return { title: this.value, list: this.range, multiIndex: [0, 0] }; }, watch: { value(newValue) { this.title = newValue; } }, mounted() { let year = parseInt(this.util.getDate('year')); let month = parseInt(this.util.getDate('month')); if (this.name == '出生年月') { for (let i = 1970; i <= year - 16; i++) { this.list[0].unshift(i + '年'); } for (let i = 1; i <= 12; i++) { this.list[1].push((i < 10 ? '0' + i : i) + '月'); } } if (this.name == '薪资') { for (let i = 1; i <= 250; i++) { this.list[0].push(i + 'k'); } } if (this.name == '时间段') { for (let i = 1990; i <= year; i++) { this.list[0].unshift(i); } for (let i = year + 1; i <= year + 8; i++) { this.list[1].push(i); } } if (this.name == '开始时间') { for (let i = 1990; i <= year; i++) { this.list[0].unshift(i + '年'); } for (let i = 1; i <= month; i++) { this.list[1].push((i < 10 ? '0' + i : i) + '月'); } } if (this.name == '结束时间') { for (let i = 1990; i <= year; i++) { this.list[0].unshift(i + '年'); } this.list[0].unshift('至今'); } }, methods: { columnchange(e) { this.multiIndex[e.detail.column] = e.detail.value; if (e.detail.column == 0) { this.list[0].forEach((item, index) => { if (this.multiIndex[0] == index) { let array = []; let year = this.util.getDate('year') + '年'; let month = parseInt(this.util.getDate('month')); //选择教育经历时间段 if (this.name == '时间段') { for (let i = parseInt(this.list[0][this.multiIndex[0]]) + 1; i <= parseInt(this.list[0][this.multiIndex[0]]) + 8; i++) { if (this.list[0][this.multiIndex[0]] == '1990以前') { array = ['1990以前']; } else { array.push(i); } } this.list[1] = array; } //选择薪资要求 if (this.name == '薪资') { for (let i = parseInt(e.detail.value) + 1; i <= parseInt(e.detail.value) + 5; i++) { if (e.detail.value > 0) { array.push(i + 'k'); } } this.list[1] = array; } //选择时间范围 if (this.name == '开始时间' || this.name == '结束时间') { //如果是今年只取当前月以前月份 month = this.list[0][this.multiIndex[0]] == year ? month : 12; for (let i = 1; i <= month; i++) { if (this.list[0][this.multiIndex[0]] != '1990以前' && this.list[0][this.multiIndex[0]] != '至今') { array.push((i < 10 ? '0' + i : i) + '月'); } } this.list[1] = array; } //选择出生年月 if (this.name == '出生年月') { for (let i = 1; i <= 12; i++) { array.push((i < 10 ? '0' + i : i) + '月'); } this.list[1] = array; } } }); } this.$forceUpdate(); }, change(e) { if (this.list[0][this.multiIndex[0]]) { this.title = this.list[0][this.multiIndex[0]]; } if (this.list[1][this.multiIndex[1]]) { this.title = this.list[0][this.multiIndex[0]] + '-' + this.list[1][this.multiIndex[1]]; } this.title = this.title.replace('年', '').replace('月', ''); this.$emit('input', this.title); this.$forceUpdate(); } } }; </script> <style lang="scss"></style>