<input id="0qass"><u id="0qass"></u></input>
  • <input id="0qass"><u id="0qass"></u></input>
  • <menu id="0qass"><u id="0qass"></u></menu>

    在Vue+Element中,Select選項值動態從后臺接口獲取的實現方法

    HTML部分

    <el-form ref="form" :model="form" label-width="82px">
        <el-form-item label="選擇媒體:">
           <el-select v-model="value" placeholder="請選擇媒體">
              <el-option
                v-for="item in options"
                :key="item.code"
                :label="item.name"
                :value="item.code">
           </el-option>
        </el-select>
    </el-form-item>

    ?數據部分

    data() {
        return {
            form:{
                code:'',
                name:''
            },
            value:'',
            options: []
        }
    }

    接口部分

    async allmedia() {
        let res = await fetch('/v3/media/allList');
        res.result.forEach(element => {
            this.options.push({name:element.name,code:element.code});
         })
     }

    get請求封裝

    // 封裝api get請求
    export const fetch = (path, params) => {
      return axios.get(path, {params: params}).then(res => {
          if(res.data.code===403){
            router.push({
                path:'/'
            });
            Message({
                message:res.data.msg,
                type:'warning'
            })
          }else{
              return res.data;
          }
      }).catch(err => {
        console.log(err);
        return Promise.reject(err);
      })
    }

    實現效果

    ?

    ??2020 CSDN 皮膚主題: 終極編程指南 設計師:CSDN官方博客 返回首頁
    多乐彩