<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main {
width: 500px;
margin: 50px auto;
padding: 15px;
background-color: antiquewhite;
}
.item>p {
display: inline-block;
margin-right: 10px;
width: 100px;
text-align: right;
}
.item>select {
min-width: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="item">
<p>项目名称</p>
<select v-model="entryValue" @change="entryChange">
<option v-for="item in mapData" :key="item.entryId" :value="item.entryId" :lable="item.entry">
{{item.entry}}
</option>
</select>
</div>
<div class="item">
<p>标段名称</p>
<select v-model="sectionValue" @change="sectionChange">
<option v-for="item in sectionOptions" :value="item.sectionId" :lable="item.section">
{{item.section}}
</option>
</select>
</div>
<div class="item">
<p>参与安全员</p>
<select v-model="personValue">
<option v-for="item in personOptions" :value="item.personId" :lable="item.person">
{{item.person}}
</option>
</select>
</div>
<p>选中的项目名称ID为：{{entryValue}}，标段名称ID为：{{sectionValue}}，参与安全员ID为：{{personValue}}。</p>
<h3>选中的项目名称entryValue： {{entryValue}}</h3>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
var vueMain = new Vue({
el: '.main',
data: {
mapData: [
{
entryId: '1',
entry: '项目1',
sectionArr: [
{
sectionId: '1-1',
section: '项目1标段1',
personArr: [
{
personId: '1-1-1',
person: '项目1标段1安全员1'
},
{
personId: '1-1-2',
person: '项目1标段1安全员2'
},
{
personId: '1-1-3',
person: '项目1标段1安全员3'
},
]
},
{
sectionId: '1-2',
section: '项目1标段2',
personArr: [
{
personId: '1-2-1',
person: '项目1标段2安全员1'
},
{
personId: '1-2-2',
person: '项目1标段2安全员2'
},
{
personId: '1-2-3',
person: '项目1标段2安全员3'
},
]
}
]
},
{
entryId: '2',
entry: '项目2',
sectionArr: [
{
sectionId: '2-1',
section: '项目2标段1',
personArr: [
{
personId: '2-1-1',
person: '项目2标段1安全员1'
},
{
personId: '2-1-2',
person: '项目2标段1安全员2'
},
{
personId: '2-1-3',
person: '项目2标段1安全员3'
},
]
},
{
sectionId: '2-2',
section: '项目2标段2',
personArr: [
{
personId: '2-2-1',
person: '项目2标段2安全员1'
},
{
personId: '2-2-2',
person: '项目2标段2安全员2'
},
{
personId: '2-2-3',
person: '项目2标段2安全员3'
},
]
}
]
}
],
// 标段下拉项数组
sectionOptions: [],
// 安全员下拉项数组
personOptions: [],
// 项目选中值
entryValue: '',
// 标段选中值
sectionValue: '',
// 安全员选中值
personValue: ''
},
methods: {
entryChange() {
const item = this.mapData.find(item => item.entryId == this.entryValue)
this.sectionOptions = item.sectionArr
this.sectionValue = ''
this.personValue = ''
},
sectionChange() {
const item = this.sectionOptions.find(item => item.sectionId == this.sectionValue)
this.personOptions = item.personArr
this.personValue = ''
}
}
})
</script>
</body>
</html>