增删改查的功能爬坑（一）

1、父子组件传参（dialog方式，路由不跳转)

<el-dialog title="用户编辑" visible.sync="dialogTableVisible" >

<UserTable :id="userid" />

</el-dialog>

坑：代码排版问题，经常把  :id="userid"  放到 el-dialog标签内

2、watch和created

　　created在dialog方式下，并不是页面初始化，如果在传参绑定的情况下，this.ruleForm是有值的

　　watch做用是监听值的变化

　　书写方式二者有区别

　　creat(){

　　　　Methods()

　　},

　　watch:{

　　　　id:function(newvalue,oldvalue){

　　　　　　Methods()

　　　　}

　　}

3、清空Table页的Form

this.$refs.ruleForm.resetFields() 不起作用

坑： <el-form-item  prop="xxxxx">  要在prop里绑定相应字段，否则this.$refs.ruleform找不到相应控件，清除功能无效。

 4、页面级不直接调用api,在api/xxxx.js下建立相应Add,Del,Update,Get方式，Table页面import方法

　　在api/xxxx.js端设置 　 

export async function get(token) {

  return await request({

    url: '/api/xxxx',

    method: 'get',

    params: { token }

  })

}

 

前端调用 import get from '@/api/xxxx'

get(this.userid).then(
　　response => {
　　this.ruleForm = response
})