shops.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <el-card shadow="never" style="border: 0;">
  3. <yun-form
  4. ref="yunform"
  5. @render="onFormRender"
  6. @submit="onSubmit"
  7. @success="onSuccess"
  8. @fail="onFail"
  9. :data="row"
  10. :columns="columns">
  11. <template #default>
  12. {:token_field()}
  13. </template>
  14. </yun-form>
  15. </el-card>
  16. </template>
  17. <script>
  18. import form from "@components/Form.js";
  19. export default{
  20. components:{
  21. 'YunForm':form
  22. },
  23. data:{
  24. columns:[
  25. {field:"id",title:"ID",edit:"hidden"},
  26. {field:"shop_id",title:"店铺名称",searchList:Yunqi.data.shopList,edit: 'select',rules:'required'},
  27. ],
  28. row:Yunqi.data.row || {}
  29. },
  30. //页面加载完成时执行
  31. onLoad:function(query){
  32. console.log(query);
  33. },
  34. //页面初始显示或在框架内显示时执行
  35. onShow:function(){
  36. },
  37. //页面在框架内隐藏时执行
  38. onHide:function(){
  39. },
  40. //页面在框架内关闭时执行
  41. onUnload:function(){
  42. },
  43. methods: {
  44. onFormRender:function(rows){
  45. //表单渲染完成后执行
  46. },
  47. onSubmit:function(rows){
  48. //表单提交前执行,返回false可以阻止表单提交
  49. /**
  50. * form常用方法
  51. * this.$refs.yunform.setError(field,message);//聚焦表单项并显示错误信息
  52. * this.$refs.yunform.hideField(field);//隐藏表单项
  53. * this.$refs.yunform.showField(field);//显示表单项
  54. * this.$refs.yunform.setValue(field,value);//为表单项设置值
  55. * this.$refs.yunform.getValue(field);//为获取表单项的值
  56. * this.$refs.yunform.setField(field,key,value);//修改表单json的其他属性值,比如rules,title,searchList等
  57. */
  58. return true;
  59. },
  60. onSuccess:function(response){
  61. //表单提交成功后执行
  62. },
  63. onFail:function(err){
  64. //表单提交失败后执行
  65. }
  66. }
  67. }
  68. </script>
  69. <style>
  70. </style>