一:
<template>
<div>
<el-select v-model="classes_1" @change="getDataitemList1()" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.csa_sname" :value="item.csa_sno">
</el-option>
</el-select>
<el-select v-model="classes_2" @change="getDataitemList2()" placeholder="请选择">
<el-option v-for="item in options1" :key="item.value" :label="item.csb_sname" :value="item.csb_sno">
</el-option>
</el-select>
<el-select v-model="classes_3" @change="getDataitemList3()" placeholder="请选择">
<el-option v-for="item in options2" :key="item.value" :label="item.csc_sname" :value="item.csc_sno">
</el-option>
</el-select>
</div>
</template>
二:
<script>
import axios from 'axios'
export default {
data() {
return {
dialogFormVisible: false,
classes_1: "",
classes_2: "",
classes_3: "",
options: [],
options1: [],
options2: [],
}
},
mounted() {
this.getDataitemList();
},
methods: {
getDataitemList() {
axios.post('http://localhost:8083/cs/abc', {
dt_sno: 'DT1421'
}
)
.then(res => {
this.options = res.data.data,
console.log(res.data);
})
.catch(function (error) {
console.log(error);
alert('加载数据失败');
});
},
getDataitemList1() {
console.log('1111');
console.log(this.classes_1);
axios.post('http://localhost:8083/cs/bca', {
csa_sno: this.classes_1
}
)
.then(res => {
this.options1 = res.data.data,
console.log(res.data);
console.log("6666"); })
.catch(function (error) { // 请求失败处理
console.log(error);
alert('加载数据失败');
});
},
getDataitemList2() {
console.log('1111');
console.log(this.classes_2);
axios.post('http://localhost:8083/cs/cba', {
csb_sno: this.classes_2
}
)
.then(res => {
this.options2 = res.data.data,
console.log(res.data);
console.log("666");
})
.catch(function (error) { // 请求失败处理
console.log(error);
alert('加载数据失败');
});
},
chooseMedicine() {
}
}
}
</script>
三:
<style lang="less" scoped>
.el-dropdown {
vertical-align: top;
}
.el-dropdown+.el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>