el-select获取id和name

         一般选中节点时只会将:value绑定的数据给v-model中，要想获取id和name一并传给后端，需要如下几步：

        1、给选择框添加点击事件 @input="selectChangeParent" 

        2、v-for中多添加一个参数 index

<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、添加选择框点击事件的方法 

          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中下拉框的数据结构 

                projectInfo: {
                    id: '',
                    name: ''
                },

         总体思路，点击事件触发时获取到点击的id后，再和v-for绑定的数组做对比，对比时projectInfo的id和点击选择的id相同时，给inputForm里的对象赋值

完整代码：

<%
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>
<% } %>