• el-select获取id和name

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

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

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

    1. <el-select v-model="inputForm.projectId" filterable placeholder="请选择"         
    2.            @input="selectChangeParent">
    3.               <el-option
    4.                   v-for="(item, index) in projectInfo"
    5.                   :key="item.id"
    6.                   :label="item.name"
    7.                   :value="item.id">
    8.               el-option>
    9. el-select>

            3、添加选择框点击事件的方法 

    1.           selectChangeParent(index){
    2.                 let listData=[];
    3.                 listData = this.projectInfo;
    4.                 for (let i = 0; i <listData.length ; i++) {
    5.                     if ( listData[i].id==this.inputForm.projectId){
    6.                         this.inputForm.projectName=listData[i].name
    7.                     }
    9.                 }
    10.             },

            这是我在data中下拉框的数据结构 

    1.                 projectInfo: {
    2.                     id: '',
    3.                     name: ''
    4.                 },

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

    完整代码：

    1. <%
    2. layout("/include/_vue_body.html", {title:"列表", parent:"隐患处理"}){
    3. %>
    4. <style>
    5.     body {
    6.         background: #ffffff !important;
    7.     }
    8. style>
    9. <div id="app" class="bg-white">
    10.     <el-form :model="inputForm" size="small" ref="inputForm" v-loading="loading"
    11.              label-width="120px">
    12.         <el-row :gutter="15">
    13.             <el-col :span="12">
    14.                 <el-form-item label="隐患名称" prop="hiddenName"
    15.                               :rules="[
    16.                   {required: true, message:'隐患名称不能为空', trigger:'blur'}
    17.                  ]">
    18.                     <el-input v-model="inputForm.hiddenName" placeholder="请填写隐患名称" maxlength="25">el-input>
    19.                 el-form-item>
    20.             el-col>
    21.             <el-col :span="12">
    22.                 <el-form-item label="整改措施" prop="hiddenMeasurId"
    23.                               :rules="[
    24.                  ]">
    25.                     <el-select v-model="inputForm.hiddenMeasurId" filterable placeholder="请选择">
    26.                         <el-option
    27.                                 v-for="item in hiddenMeasureList"
    28.                                 :key="item.id"
    29.                                 :label="item.measureName"
    30.                                 :value="item.id">
    31.                         el-option>
    32.                     el-select>
    33.                 el-form-item>
    34.             el-col>
    35.             <el-col :span="12">
    36.                 <el-form-item label="整改负责人" prop="principal"
    37.                               :rules="[
    38.                  ]">
    39.                     <fs-user-select
    40.                             :is_layer="true"
    41.                             :limit="1"
    42.                             :value="inputForm.principal"
    43.                             @get-value="(value) => { inputForm.principal = value}">fs-user-select>
    44.                 el-form-item>
    45.             el-col>
    46.             <el-col :span="12">
    47.                 <el-form-item label="整改监督人" prop="supervision"
    48.                               :rules="[
    49.                  ]">
    50.                     <fs-user-select
    51.                             :is_layer="true"
    52.                             :limit="1"
    53.                             :value="inputForm.supervision"
    54.                             @get-value="(value) => { inputForm.supervision = value}">fs-user-select>
    55.                 el-form-item>
    56.             el-col>
    57.             <el-col :span="12">
    58.                 <el-form-item label="隐患类型" prop="hiddenType"
    59.                               :rules="[
    60.                  ]">
    61.                     <el-select v-model="hiddenType" @change="selectProjectType">
    62.                         <el-option v-for="item in hiddenTypeList" :key="item.value" :label="item.label"
    63.                                    :value="item.value">el-option>
    64.                     el-select>
    65.  
    66.                 el-form-item>
    67.             el-col>
    68.             <el-col :span="12">
    69.                 <el-form-item label="所属项目" prop="projectId"
    70.                               :rules="[
    71.                  ]">
    72.                     <el-select v-model="inputForm.projectId" filterable placeholder="请选择" @input="selectChangeParent">
    73.                         <el-option
    74.                                 v-for="(item, index) in projectInfo"
    75.                                 :key="item.id"
    76.                                 :label="item.name"
    77.                                 :value="item.id">
    78.                         el-option>
    79.                     el-select>
    80.                 el-form-item>
    81.             el-col>
    82.  
    83.             <el-col :span="24">
    84.                 <el-form-item label="隐患地点" prop="address"
    85.                               :rules="[
    86.                  ]">
    87.                     <el-input v-model="inputForm.address" placeholder="请填写隐患地点" maxlength="64"
    88.                               show-word-limit>el-input>
    89.                 el-form-item>
    90.             el-col>
    91.  
    92.             <el-col :span="24">
    93.                 <el-form-item label="隐患详情" prop="hiddenDetail"
    94.                               :rules="[
    95.                  ]">
    96.                     <el-input :rows="6" type="textarea" v-model="inputForm.hiddenDetail" placeholder="请填写隐患详情"
    97.                               maxlength="200" show-word-limit>el-input>
    98.                 el-form-item>
    99.             el-col>
    100.             <el-col :span="12">
    101.                 <el-form-item label="隐患图片" prop="hiddenUrl"
    102.                               :rules="[
    103.                  ]">
    104.                     <fs-upload-imgs v-model="inputForm.hiddenUrl">fs-upload-imgs>
    105.                 el-form-item>
    106.             el-col>
    107.         el-row>
    108.     el-form>
    109. div>
    110. <script>
    111.     var formContainer = new Vue({
    112.         el: '#app',
    113.         mixins: [sharpMixin],
    114.         data() {
    115.             return {
    116.                 loading: false,
    117.                 inputForm: {
    118.                     id: '${hiddenInfo.id}',
    119.                     hiddenName: '',
    120.                     principal: '',
    121.                     supervision: '',
    122.                     hiddenUrl: '',
    123.                     hiddenDetail: '',
    124.                     address: '',
    125.                     projectId: '',
    126.                     hiddenMeasurId: '',
    127.                     projectType: '',
    128.                     projectName:'',
    129.                     hiddenMeasurName: ''
    130.                 },
    131.                 hiddenType: '',
    132.                 hiddenTypeList: [],
    133.                 projectInfo: {
    134.                     id: '',
    135.                     name: ''
    136.                 },
    137.                 hiddenMeasure:{
    138.                     id: '',
    139.                     measureName: '',
    140.                 },
    141.                 hiddenMeasureList:[]
    142.             }
    143.         },
    144.         created() {
    145.             let that = this
    146.             this.clearForm(function () {
    147.                 if (that.inputForm.id != '') {
    148.                     that.loadData()
    149.                 }
    150.             });
    151.             this.hiddenTypeList = this.getDictList("hidden_type")
    152.             this.initHiddenMeasure()
    153.         },
    154.         methods: {
    155.             loadData() {
    156.                 this.loading = true
    157.                 this.get('${ctx}/safety/hiddenInfo/info', {id: this.inputForm.id}).then((res) => {
    158.                     if (res.data) {
    159.                         this.inputForm = res.data
    160.                         this.hiddenType = this.inputForm.projectType
    161.                     }
    162.                     this.initBasicData()
    163.                     this.selectProjectType()
    164.                     this.loading = false
    165.                 })
    166.             },
    167.             selectChangeParent(index){
    168.                 let listData=[];
    169.                 listData = this.projectInfo;
    170.                 for (let i = 0; i length ; i++) {
    171.                     if ( listData[i].id==this.inputForm.projectId){
    172.                         this.inputForm.projectName=listData[i].name
    173.                     }
    174.  
    175.                 }
    176.             },
    177.             initBasicData() {
    178.                 let initData = {}
    179.                 Object.assign(this.inputForm, initData);
    180.             },
    181.             initHiddenMeasure(){
    182.                 this.get('${ctx}/safety/hiddenMeasure/hiddenList').then((res) => {
    183.                     if (res.data) {
    184.                         this.hiddenMeasureList = res.data
    185.                     }
    186.                 })
    187.             },
    188.             initProjectData(type) {
    189.                 this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {
    190.                     if (res.data) {
    191.                         this.projectInfo = res.data
    192.                     }
    193.                 })
    194.             },
    195.             initBuildData(type) {
    196.                 this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {
    197.                     if (res.data) {
    198.                         this.projectInfo = res.data
    199.                     }
    200.                 })
    201.             },
    202.             initRoomData(type) {
    203.                 this.get('${ctx}/safety/hiddenInfo/findProjectInfo?type=' + type).then((res) => {
    204.                     if (res.data) {
    205.                         this.projectInfo = res.data
    206.                     }
    207.                 })
    208.             },
    209.             selectProjectType() {
    210.                 this.inputForm.projectType = this.hiddenType
    211.                 let type = this.inputForm.projectType
    212.                 if (this.hiddenType == 1) {
    213.                     //hiddenType为1时查询在建项目信息
    214.                     this.projectInfo = ''
    215.                     this.initProjectData(type)
    216.                 } else if (this.hiddenType == 2) {
    217.                     //hiddenType为2时查询建筑物信息
    218.                     this.projectInfo = ''
    219.                     this.initBuildData(type)
    220.                 } else {
    221.                     //hiddenType为3时查询房屋信息
    222.                     this.projectInfo = ''
    223.                     this.initRoomData(type)
    224.                 }
    225.  
    226.             },
    227.             clearForm(call) {
    228.                 let that = this
    229.                 setTimeout(function () {
    230.                     that.$refs['inputForm'].resetFields();
    231.                     if (call) {
    232.                         call();
    233.                     }
    234.                 }, 300)
    235.             },
    236.             // 提交
    237.             doSubmit(call) {
    238.                 this.$refs['inputForm'].validate((valid) => {
    239.                     if (valid) {
    240.  
    241.                         this.post('${ctx}/safety/hiddenInfo/save', this.inputForm).then((res) => {
    242.                             if (res.success) {
    243.                                 this.$message.success(res.msg)
    244.                                 call()
    245.                             } else {
    246.                                 this.$message.error(res.msg)
    247.                             }
    248.                         })
    249.                     } else {
    250.                         return false;
    251.                     }
    252.                 })
    253.             }
    254.         }
    255.     })
    256. script>
    257. <% } %>

  • 相关阅读:
    软考软件设计师----软件工程(自用)
    iNFTnews | 元宇宙的欢乐世界：别开生面的游戏、音乐会、主题公园和电影
    OpenGL调用窗口，方向键和鼠标
    【漏洞通告】CVE-2022-31690 Spring Security Oauth2 Client权限提升漏洞
    gitlab安装
    C++PrimerPlus 第六章 分支语句和逻辑运算符（编程练习含答案）
    万字+28张图带你探秘小而美的规则引擎框架LiteFlow
    set和map的封装
    css案例:取消组件的阴影
    使用单调队列解决 “滑动窗口最大值” 问题
  • 原文地址：https://blog.csdn.net/weixin_51722520/article/details/134210303