怎样动态的改变下拉列表的选中项？

Question

<template>
<div>
<button 
          id="btnSubmit"
          type="button" 
          class="btn btn-primary" 
          @click="change" >提交</button>
<button 
          id="btnSubmit"
          type="button" 
          class="btn btn-primary" 
          @click="del" >删除</button>
<v-table
            is-horizontal-resize
            style="width:100%"
            :columns="columns"
            :table-data="tableData"
            row-hover-color="#eee"
            row-click-color="#edf7ff"
            :cell-edit-done="cellEditDone"
            :select-all="selectALL"
            :select-change="selectChange"
            :select-group-change="selectGroupChange"
            @on-custom-comp="customCompFunc"
    ></v-table>
    <!-- {{selected}} -->
</div>

</template>
<script>
import 'vue-easytable/libs/themes-base/index.css'
import {VTable} from 'vue-easytable'
import Vue from 'vue'
Vue.component(VTable.name, VTable)
export default{
  name:'HelloWorld',
  data(){
    return {
      response:null,
      index:0,
      my:null,
      id:0,
      itd:[],
      selects:[],
      at:['等待中','测试中','测试完成'],
      // tableData:[],
      // tableData:JSON.parse(localStorage.getItem('test')),
      tableData: [
                        {"name":"等待中","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
                        {"name":"等待中","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
                        {"name":"等待中","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
                        {"name":"等待中","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
                        {"name":"等待中","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"}
                     ],
                    columns:  [
                      {width: 60, titleAlign: 'center',columnAlign:'center',type: 'selection'},
                             {field: 'name', title:'姓名', width: 80, titleAlign: 'center',columnAlign:'center',isEdit:true,
                               isResize:true},
                             {field: 'tel', title: '手机号码', width: 150, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
                             {field: 'hobby', title: '爱好', width: 150, titleAlign: 'center',columnAlign:'center',isEdit:true,isResize:true},
                             {field: 'address', title: '地址', width: 280, titleAlign: 'center',columnAlign:'left',isEdit:true,isResize:true},
                             {field: 'method', title: 'method', width: 100, titleAlign: 'center',columnAlign:'center',componentName:'method-options',isResize:true}
                     ]

    }
  },
  methods:{
    selectALL(selection){

                    console.log('select-aLL',selection);
                 },

    selectChange(selection,rowData){
                  console.log('select-change',selection,rowData);
                 },

    selectGroupChange(selection){
                    console.log('select-group-change',selection);
                    this.selects=selection
                 },
     cellEditDone(newValue,oldValue,rowIndex,rowData,field){

                this.tableData[rowIndex][field] = newValue;
                // this.tableData=[]
                // 接下来处理你的业务逻辑，数据持久化等...
            },
      del(){
        for(let i=0;i<this.selects.length;i++){
          for(let x in this.selects){
            let index=x.indexOf(this.tableData)
            this.tableData.splice(index,1)
          }
        }
      },
      add(){
        let arr=this.tableData
        // console.log(arr.length)
        let it=this.at.indexOf(arr[this.index]['name'])
        for(let i=0;i<=this.index;i++){
          if(it<2){
            arr[this.index]['name']=this.at[it+1]
          }
          else{
            arr[this.index]['name']=this.at[2]
          }
          
        }
    
        this.index++
        if(this.index>=5){
          this.index=0
        }
      },
            change(){
              // console.log(selected)
              fetch('http://172.28.14.63:8000/api/lavatest',{
                headers: {
                    Authorization: 'Basic cm9vdDpBYTEyMzQ1Ng=='
                }
            }).then(res=>{
              // console.log(res.status)
              this.response=res
              // return res.json()
            }).then(data=>{
              console.log(this.response)
              // console.log(data)
            })
            
             this.my=setInterval(this.add,
             1000)
            },
            customCompFunc(params){
              //  console.log(params['itd']);
              
              this.itd[params['itd']]=params['value']
              for(let i=0;i<this.tableData.length;i++){
                if(this.itd[i]==undefined){
                  this.itd[i]='Get'
                }
              }
              console.log(this.itd)
            }
  }
  
}
Vue.component('method-options',{
  data:function(){
    return {
      selects: [
            {method: 'Get'},
            {method: 'Post'},
            {method: 'Put'},
            {method: 'Delete'},
            {method: 'Head'},
            {method: 'Options'},
        ]
    }
  },
  template:'<span><select  @change="selectVal"><option v-for="item in selects">{{ item.method }}</option></select></span>',
  props:{
            rowData:{
                type:Object
            },
            field:{
                type:String
            },
            index:{
                type:Number
            }
        },
  methods:{
    selectVal(e){
      let params = {itd:this.index,value:e.target.value};
      // console.log(e.target.value)
      this.$emit('on-custom-comp',params);
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
    .cell-edit-color{
        color:red;
        font-weight: bold;
    }
</style>