饿了么UI 开关跟多文本编辑，下拉

 

 

 

                  v-for="item in cityList"

                  :key="item.id"

                  :label="item.name"

                  :value="item.id">

 

 

根据iD修改

准备工作：修改easymock 接口 /gathering/gathering/{id} （GET）

 

{

  "flag": true,

  "code": 20000,

  'message': "查询成功",

  'data': {

    "id": "1",

    "name": "测试活动",

    "sponsor": "主办方",

    "image": "@image",

    "starttime": "@date",

    "endtime": "@date",

    "address": "@county(true)",

    "enrolltime": "@date",

    "state": "1"

  }

}

代码实现：

（1）修改src/api/gathering.js，增加方法定义

 

 

  findById(id) {

    return request({

      url: `/gathering/gathering/${id}`,

      method: 'get'

    })

  }

（2）修改src/views/table/gathering.vue的js脚本部分

新增handleEdit方法

 

 

handleEdit(id){

         this.dialogFormVisible=true//打开窗口        

          //调用查询

         gatheringApi.findById(id).then( response=>{

            if(response.flag){

                this.pojo=response.data

            }            

         })                     

 }

（3）在表格table中增加模板列 ,模板列中防止修改按钮，调用handleEdit方法

 

 

 
  
      fixed="right"
 
  
      label="操作"
 
  
      width="100">
 
  
  
 
  
 
  
fixed="right"的作用是定义此列为右固定列
 
  
slot-scope用于指定当前行的上下文。使用scope.row可以获取行对象