一般选中节点只会返回:value绑定的数据给v-model中，要想获取id和name一并传给后端，需要如下几步：
1、给选择框添加点击事件 @input="selectChangeParent"
2、v-for中多添加一个参数 index
html
<el-select v-model="inputForm.projectId" filterable placeholder="请选择"
@input="selectChangeParent">
<el-option
v-for="(item, index) in projectInfo"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>3、添加选择框点击事件的方法
html
selectChangeParent(index){
let listData=[];
listData = this.projectInfo;
for (let i = 0; i <listData.length ; i++) {
if ( listData[i].id==this.inputForm.projectId){
this.inputForm.projectName=listData[i].name
}
}
},这是我在data中下拉框的数据结构
html
projectInfo: {
id: '',
name: ''
},总体思路，点击事件触发时获取到点击的id后，再和v-for绑定的数组做对比，对比时projectInfo的id和点击选择的id相同时，给inputForm里的对象赋值
完整代码：
html
<%
layout("/include/_vue_body.html", {title:"列表", parent:"隐患处理"}){
%>
<style>
body {
background: #ffffff !important;
}
</style>
<div id="app" class="bg-white">
<el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading"
label-width="120px">
<el-row :gutter="15">
<el-col :span="12">
<el-form-item label="隐患名称" prop="hiddenName"
:rules="[
{required: true, message:'隐患名称不能为空', trigger:'blur'}
]">
<el-input v-model="inputForm.hiddenName" placeholder="请填写隐患名称" maxlength="25"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="整改措施" prop="hiddenMeasurId"
:rules="[
]">
<el-select v-model="inputForm.hiddenMeasurId" filterable placeholder="请选择">
<el-option
v-for="item in hiddenMeasureList"
:key="item.id"
:label="item.measureName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="整改负责人" prop="principal"
:rules="[
]">
<fs-user-select
:is_layer="true"
:limit="1"
:value="inputForm.principal"
@get-value="(value) => { inputForm.principal = value}"></fs-user-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="整改监督人" prop="supervision"
:rules="[
]">
<fs-user-select
:is_layer="true"
:limit="1"
:value="inputForm.supervision"
@get-value="(value) => { inputForm.supervision = value}"></fs-user-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="隐患类型" prop="hiddenType"
:rules="[
]">
<el-select v-model="hiddenType" @change="selectProjectType">
<el-option v-for="item in hiddenTypeList" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属项目" prop="projectId"
:rules="[
]">
<el-select v-model="inputForm.projectId" filterable placeholder="请选择" @input="selectChangeParent">
<el-option
v-for="(item, index) in projectInfo"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="隐患地点" prop="address"
:rules="[
]">
<el-input v-model="inputForm.address" placeholder="请填写隐患地点" maxlength="64"
show-word-limit></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="隐患详情" prop="hiddenDetail"
:rules="[
]">
<el-input :rows="6" type="textarea" v-model="inputForm.hiddenDetail" placeholder="请填写隐患详情"
maxlength="200" show-word-limit></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="隐患图片" prop="hiddenUrl"
:rules="[
]">
<fs-upload-imgs v-model="inputForm.hiddenUrl"></fs-upload-imgs>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<script>
var formContainer = new Vue({
el: '#app',
mixins: [sharpMixin],
data() {
return {
loading: false,
inputForm: {
id: '${hiddenInfo.id}',
hiddenName: '',
principal: '',
supervision: '',
hiddenUrl: '',
hiddenDetail: '',
address: '',
projectId: '',
hiddenMeasurId: '',
projectType: '',
projectName:'',
hiddenMeasurName: ''
},
hiddenType: '',
hiddenTypeList: [],
projectInfo: {
id: '',
name: ''
},
hiddenMeasure:{
id: '',
measureName: '',
},
hiddenMeasureList:[]
}
},
created() {
let that = this
this.clearForm(function () {
if (that.inputForm.id != '') {
that.loadData()
}
});
this.hiddenTypeList = this.getDictList("hidden_type")
this.initHiddenMeasure()
},
methods: {
loadData() {
this.loading = true
this.get('${ctx}/safety/hiddenInfo/info', {id: this.inputForm.id}).then((res) => {
if (res.data) {
this.inputForm = res.data
this.hiddenType = this.inputForm.projectType
}
this.initBasicData()
this.selectProjectType()
this.loading = false
})
},
selectChangeParent(index){
let listData=[];
listData = this.projectInfo;
for (let i = 0; i <listData.length ; i++) {
if ( listData[i].id==this.inputForm.projectId){
this.inputForm.projectName=listData[i].name
}
}
},
initBasicData() {
let initData = {}
Object.assign(this.inputForm, initData);
},
initHiddenMeasure(){
this.get('${ctx}/safety/hiddenMeasure/hiddenList').then((res) => {
if (res.data) {
this.hiddenMeasureList = res.data
}
})
},
initProjectData(type) {
this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {
if (res.data) {
this.projectInfo = res.data
}
})
},
initBuildData(type) {
this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {
if (res.data) {
this.projectInfo = res.data
}
})
},
initRoomData(type) {
this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {
if (res.data) {
this.projectInfo = res.data
}
})
},
selectProjectType() {
this.inputForm.projectType = this.hiddenType
let type = this.inputForm.projectType
if (this.hiddenType == 1) {
//hiddenType为1时查询在建项目信息
this.projectInfo = ''
this.initProjectData(type)
} else if (this.hiddenType == 2) {
//hiddenType为2时查询建筑物信息
this.projectInfo = ''
this.initBuildData(type)
} else {
//hiddenType为3时查询房屋信息
this.projectInfo = ''
this.initRoomData(type)
}
},
clearForm(call) {
let that = this
setTimeout(function () {
that.$refs['inputForm'].resetFields();
if (call) {
call();
}
}, 300)
},
// 提交
doSubmit(call) {
this.$refs['inputForm'].validate((valid) => {
if (valid) {
this.post('${ctx}/safety/hiddenInfo/save', this.inputForm).then((res) => {
if (res.success) {
this.$message.success(res.msg)
call()
} else {
this.$message.error(res.msg)
}
})
} else {
return false;
}
})
}
}
})
</script>
<% } %>