1. 程式人生 > >關於elementui 中select選中值繫結為物件時

關於elementui 中select選中值繫結為物件時

注:值為物件型別時,需要提供一個 value-key 作為唯一性標識

HTML:

<el-form-item v-if="item.type=='fncsel' && item.grid!='two'" :label="item.label" :class='{"is-required":item.required}'>

      <el-select class="fl" placeholder="請選擇" value-key="name" v-model="item.value" @visible-change="fncselvchange(item)" @change="formChangeFun">
         <el-option v-for="option in item.options" :key="option.name" :value="option" :label="option.name"  :id="option.id"></el-option>
      </el-select>

      <i v-if="item.oper" class="fpselico" :class="item.oper.ico" :title="item.oper.name" @click="fpselBtnClick(item)"></i>

</el-form-item>

JS:

fncselvchange(item){
        var _this = this;
        var qs=require('qs');
        item.options=[];
        axios.post("/api/base/para/getParaListByCode", qs.stringify({
          code:item.code,
          token:this.$store.state.token.token
        })).then(function (response) {
          response.data.data.forEach((item1)=>{
            item.options.push({
              id:item1.id,
              valStr:item1.valStr,
              name:item1.name,
            });
          })
        })
   },
    fpselpchange(item){
        if(item.hasCasc==true){
          var _this = this;
          var qs=require('qs');
          item.options=[];
          axios.post("/api/base/para/getParaListByCode", qs.stringify({
            code:item.code,
            token:this.$store.state.token.token
          })).then(function (response) {
            response.data.data.forEach((item1)=>{
              item.options.push({
                id:item1.id,
                valStr:item1.valStr,
                name:item1.name,
                paraInfo:item1.paraList[0]
              });
            })
          })
        }
      },