美文网首页
vue.js el-select 传多个值

vue.js el-select 传多个值

作者: queue | 来源:发表于2018-12-28 19:00 被阅读0次

el-select 选择框,选择之后传值,万一要传多个值怎么办,v-model只绑定了一个值。
解决方法: 加入监听事件 @change="getName(temp.communityId)"
以下是vue文件代码

<el-form-item :label="$t('table.communityName')" prop="communityName">
        <el-select
          class="filter-item"
          v-model="temp.communityId"
          :disabled="read"
          :placeholder="$t('table.communityName')"
          @change="getName(temp.communityId)"
        >
          <el-option
            v-for=" item in listcomm"
            :key="item.communityId"
            :label="item.communityName"
            :value="item.communityId"
          ></el-option>
        </el-select>
        <!-- <span v-if="show == false">{{temp.communityName = item.communityName}}</span> -->
      </el-form-item>

以下是js代码,getComm() 获取到列表,getName()循环这个列表,找到与id相同的,取得communityName

getName(val) {
      val = this.temp.communityId
      var array = this.getComm()
      for (let index = 0; index < array.length; index++) {
        const element = array[index].communityId;
        if (element == val) {
          this.temp.communityName = array[index].communityName
        }
      }
      return this.temp.communityName
    },
    getComm() {
      listcommunity().then((response) => {
        this.listcomm = response.data
      })
      return this.listcomm
    },
//这个方法是通过后台接口,直接取得对应的值
// getName(val) {
    //   val = this.temp.communityId
    //   getestatebyid(val).then((response) => {
    //     this.temp.communityName = response.data.communityName
    //   })
    //   return this.temp.communityName
    // },

继续研究下能不能直接传数组

相关文章

网友评论

      本文标题:vue.js el-select 传多个值

      本文链接:https://www.haomeiwen.com/subject/ktedlqtx.html