vue vant的vant-picker实现薪资选择器
Sonder
2023-04-03
2340字
6分钟
浏览 (793)
![image.png](https://s2.loli.net/2023/04/03/jAmC1DIftal3UEz.png)
<template>
<div>
<!-- 遮罩层 -->
<van-popup
v-model="wages"
position="bottom"
custom-style="height: 20%;"
bind:close="onClose"
>
<!-- picker多联级选择器 -->
<van-picker
v-model="salaryRequirements"
value-key="text"
show-toolbar
title="期望月薪"
confirm-button-text="确定"
:columns="wagesColumns"
@cancel="wagesCancel"
@confirm="wagesConfirm"
@change="wagesChange"
/>
</van-popup>
</div>
</template>
<script>
export default {
data() {
return {
salaryRequirements: [],
wages: true, // 控制这个去显示picker+遮罩层
salaryExpectationLeft: [],
salaryExpectation: {},
wagesColumns: [],
}
},
mounted () {
// 因为有联动,所以说如果选择了1k,那么右边就不能选择低于1k的,所以
// 得设置x = 0
let x = 0;
for (let i = 0; i <= 250; i++) {
// 因为第一个是面议,后面的都是数字,id与text值相同
if (i == 0) {
this.salaryExpectationLeft.push({ id: 0, text: `面议` });
this.salaryExpectation['面议'] = [{ id: 0, text: `面议` }];
} else {
this.salaryExpectation[`${i}k`] = [];
this.salaryExpectationLeft.push({ id: i, text: `${i}k` });
x++;
for (let j = 1; j <= 250; j++) {
this.salaryExpectation[`${i}k`].push(
{ id: j + x, text: `${j + x}k` }
)
}
}
}
this.wagesColumns = [
{
values: this.salaryExpectationLeft,
className: 'column1',
// defaultIndex: this.salaryRequirements[0].id
// 没选中情况下进入picker的时候默认选种哪个数据
},
{
values: this.salaryExpectation[
this.salaryExpectationLeft[0].text
],
className: 'column2',
// defaultIndex: this.salaryRequirements[1].id
// 没选中情况下进入picker的时候默认选种哪个数据
},
];
},
methods: {
// 每一次change的时候让picker右边数据变化
wagesChange (picker, values) {
this.wagesColumns[1].values =
this.salaryExpectation[values[0].text]
},
// 点击取消
wagesCancel () {
this.wages = false;
},
// 点击确定
wagesConfirm (item) {
if (item[0].id == 0) {
item[1] = { id: 0, text: '面议' }
}
this.wages = false;
},
}
}
</script>