当前位置：首页 > news >正文

el-select获取id和name

news 2025/6/29 5:55:40

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

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

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

<el-select v-model="inputForm.projectId" filterable placeholder="请选择"         @input="selectChangeParent"><el-optionv-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-optionv-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-optionv-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 = thisthis.clearForm(function () {if (that.inputForm.id != '') {that.loadData()}});this.hiddenTypeList = this.getDictList("hidden_type")this.initHiddenMeasure()},methods: {loadData() {this.loading = truethis.get('${ctx}/safety/hiddenInfo/info', {id: this.inputForm.id}).then((res) => {if (res.data) {this.inputForm = res.datathis.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.hiddenTypelet type = this.inputForm.projectTypeif (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 = thissetTimeout(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>
<% } %>

查看全文

http://www.lryc.cn/news/216710.html