1、效果图
效果图说明:篮子类型选择数量篮子时候,交易方向选择买入,卖出,调仓,清仓 则input框都是篮子数量,但是下侧按钮会根据选择交易方向发生自适应变化;但是篮子类型若是权重篮子时候,交易方向一旦变化后面input输入框和下侧按钮都要变化;具体情况如效果图
2、源码实现
<template>
<div>
<el-form :model="form">
<!-- 篮子类型下拉框 -->
<el-form-item label="篮子类型:" prop="basketType">
<el-select
v-model="form.basketType"
placeholder="请选择篮子类型"
@change="basketChange"
>
<el-option
v-for="item in this.form.basketTypeDict"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
<!-- 交易方向下拉框 -->
<el-form-item label="交易方向" prop="selectBsFlag">
<el-select
v-model="form.selectBsFlag"
placeholder="请选择交易方向"
@change="selectBsFlagChange"
>
<el-option
v-for="dict in bsFlagOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<!-- input输入框情况 -->
<el-form-item label="篮子数量:" v-if="verifyInputNumBasketN1 === 'n1'">
<el-input v-model="form.basketNum"></el-input>
</el-form-item>
<el-form-item
label="买入金额:"
v-if="
verifyInputNumBasketN1 === 'n2' && verifyInputWeightBasketN2 === 'NB'
"
>
<el-input v-model="form.buyAmount"></el-input>
</el-form-item>
<el-form-item
label="卖出金额:"
v-if="
verifyInputNumBasketN1 === 'n2' && verifyInputWeightBasketN2 === 'NS'
"
>
<el-input v-model="form.soldAmount"></el-input>
</el-form-item>
<el-form-item
label="目标市值:"
v-if="
verifyInputNumBasketN1 === 'n2' && verifyInputWeightBasketN2 === 'NA'
"
>
<el-input v-model="form.targetMarketValue"></el-input>
</el-form-item>
<el-form-item
label="清仓比例:"
v-if="
verifyInputNumBasketN1 === 'n2' && verifyInputWeightBasketN2 === 'NC'
"
>
<el-input v-model="form.clearRate"></el-input>
</el-form-item>
<!-- 按钮情况 -->
<el-form-item v-if="bsFlagNum === '3B'">
<el-button type="primary" @click="buyBasket">篮子买入</el-button>
</el-form-item>
<el-form-item v-if="bsFlagNum === '3S'">
<el-button type="primary" @click="soldBasket">篮子卖出</el-button>
</el-form-item>
<el-form-item v-if="bsFlagNum === '3A'">
<el-button type="primary" @click="adjustHouse">篮子调仓</el-button>
</el-form-item>
<el-form-item v-if="bsFlagNum === '3C'">
<el-button type="primary" @click="removeHouse">篮子清仓</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
// form表单
form: {
// 篮子数量
basketNum: 0,
// 买入金额
buyAmount: 0,
// 卖出金额
soldAmount: 0,
// 目标市值
targetMarketValue: 0,
// 清仓比例
clearRate: 0,
// 篮子类型字典
basketTypeDict: [
{ dictValue: 0, dictLabel: "数量篮子" },
{ dictValue: 1, dictLabel: "权重篮子" },
],
},
// 临时存储判断input框 数量篮子
verifyInputNumBasket: ["n1", "n2"],
// 判断input框 数量篮子
verifyInputNumBasketN1: "n1",
// 临时存储判断input框 权重篮子
verifyInputWeightBasket: ["NB", "NS", "NA", "NC"],
// 判断input框 权重篮子
verifyInputWeightBasketN2: "NB",
// 按钮默认显示为 bsFlagNum = '3B'
bsFlagNum: "3B",
// 临时判断交易方向
verifyBsFlagNum: ["3B", "3S", "3A", "3C"],
// 交易方向字典
bsFlagOptions: [
{ dictValue: "3B", dictLabel: "篮子买入" },
{ dictValue: "3S", dictLabel: "篮子卖出" },
{ dictValue: "3A", dictLabel: "篮子调仓" },
{ dictValue: "3C", dictLabel: "篮子清仓" },
],
};
},
methods: {
/**
* @param selectedValue 篮子类型dictValue
* @description 篮子类型影响交易方向和input输入框
*/
basketChange(selectedValue) {
// 遍历 赋值 付过 item=
// 数量
for (let i = 0; i < this.form.basketTypeDict.length; i++) {
// 权重篮子
if (
this.form.basketTypeDict[i].dictValue === selectedValue &&
selectedValue === 1
) {
this.form.selectBsFlag = "";
this.verifyInputWeightBasketN2 = "NB";
this.verifyInputNumBasketN1 = "n2";
}
}
},
/**
* @param selectedValue 交易方向dictValue
* @description 由篮子类型和交易方向共同影响 input输入框
*/
selectBsFlagChange(selectedValue) {
for (let i = 0; i < this.verifyInputNumBasket.length; i++) {
for (let j = 0; j < this.bsFlagOptions.length; j++) {
// 篮子类型为 n2 ,交易方向动态获取判断
if (
selectedValue === this.bsFlagOptions[j].dictValue &&
this.verifyInputNumBasketN1 === this.verifyInputNumBasket[i]
) {
this.verifyInputWeightBasketN2 = this.verifyInputWeightBasket[j];
}
// 不论是权重篮子还是数量篮子 按钮变化
if (selectedValue === this.bsFlagOptions[j].dictValue) {
this.bsFlagNum = this.verifyBsFlagNum[j];
}
}
}
},
/**
* @description 篮子买入
*/
buyBasket(a) {
console.log(a);
},
/**
* @description 篮子卖出
*/
soldBasket(a) {
console.log(a);
},
/**
* @description 篮子调仓
*/
adjustHouse(a) {
console.log(a);
},
/**
* @description 篮子清仓
*/
removeHouse(a) {
console.log(a);
},
},
};
</script>
3、关键代码说明
/**
* @param selectedValue 交易方向dictValue
* @description 由篮子类型和交易方向共同影响 input输入框
*/
selectBsFlagChange(selectedValue) {
for (let i = 0; i < this.verifyInputNumBasket.length; i++) {
for (let j = 0; j < this.bsFlagOptions.length; j++) {
// 篮子类型为 n2 ,交易方向动态获取判断
if (
selectedValue === this.bsFlagOptions[j].dictValue &&
this.verifyInputNumBasketN1 === this.verifyInputNumBasket[i]
) {
this.verifyInputWeightBasketN2 = this.verifyInputWeightBasket[j];
}
// 不论是权重篮子还是数量篮子 按钮变化
if (selectedValue === this.bsFlagOptions[j].dictValue) {
this.bsFlagNum = this.verifyBsFlagNum[j];
}
}
}
},