基础

TIP

1.0.0+

普通用法

基础 - 图1

里面主要包含了changeclick俩个回调方法,返回当前的值value和列的属性column,resetForm清空表单内容,但是默认值不会被清空,resetChange为清空方法的回调,如果想阻止依次排列,在组织属性后面加入row为true即可,配置mocktrue,在对应的column配置mock,配置即可开启数据填充,具体看如下例子

  1. <el-row style="margin-bottom:20px">
  2. <el-radio-group v-model="sizeValue">
  3. <el-radio label="">默认</el-radio>
  4. <el-radio label="small">small</el-radio>
  5. <el-radio label="mini">mini</el-radio>
  6. </el-radio-group>
  7. </el-row>
  8. <avue-form ref="form" v-model="obj" :option="option" @reset-change="emptytChange" @submit="submit">
  9. <template slot-scope="scope" slot="menuForm">
  10. <el-button @click="tip">自定义按钮</el-button>
  11. </template>
  12. </avue-form>
  13. <script>
  14. const DIC = {
  15. VAILD: [{
  16. label: '真',
  17. value: 'true'
  18. }, {
  19. label: '假',
  20. value: 'false'
  21. }],
  22. SEX: [{
  23. label: '男',
  24. value: 0
  25. }, {
  26. label: '女',
  27. value: 1
  28. }]
  29. }
  30. export default {
  31. data() {
  32. return {
  33. obj:{},
  34. sizeValue:''
  35. }
  36. },
  37. computed: {
  38. option(){
  39. return{
  40. size:this.sizeValue,
  41. mock:true,
  42. submitText: '完成',
  43. column: [{
  44. label: "用户名",
  45. prop: "username",
  46. tip: '这是信息提示',
  47. span: 8,
  48. maxlength: 3,
  49. suffixIcon: 'el-icon-tickets',
  50. prefixIcon: 'el-icon-tickets',
  51. minlength: 2,
  52. mock:{
  53. type:'name',
  54. en:true,
  55. },
  56. rules: [{
  57. required: true,
  58. message: "请输入用户名",
  59. trigger: "blur"
  60. }],
  61. change:({value,column})=>{
  62. this.obj.address=value;
  63. this.$message.success('address change')
  64. },
  65. click:({value,column})=>{
  66. this.$message.success('click')
  67. }
  68. },
  69. {
  70. label: "姓名",
  71. prop: "name",
  72. mock:{
  73. type:'name'
  74. },
  75. span:8
  76. },
  77. {
  78. label: "类型",
  79. prop: "type",
  80. type: "select",
  81. dicData: DIC.VAILD,
  82. span:6,
  83. mock:{
  84. type:'dic',
  85. },
  86. },
  87. {
  88. label: "权限",
  89. prop: "grade",
  90. span: 6,
  91. type: "checkbox",
  92. dicData: DIC.VAILD,
  93. mock:{
  94. type:'dic',
  95. },
  96. },
  97. {
  98. label: "开关",
  99. prop: "switch",
  100. span: 6,
  101. type: "switch",
  102. dicData: DIC.SEX,
  103. mock:{
  104. type:'dic'
  105. },
  106. hide: true,
  107. row:true,
  108. },
  109. {
  110. label: "性别",
  111. prop: "sex",
  112. span: 6,
  113. type: "radio",
  114. dicData: DIC.SEX,
  115. mock:{
  116. type:'dic'
  117. },
  118. valueDefault: 0,
  119. change:({value,column})=>{
  120. this.$message.success('change')
  121. }
  122. },
  123. {
  124. label: "数字",
  125. prop: "number",
  126. type: 'number',
  127. span: 6,
  128. precision:2,
  129. mock:{
  130. type:'number',
  131. max:1,
  132. min:2,
  133. precision:2
  134. },
  135. valueDefault: 3,
  136. minRows: 0,
  137. maxRows: 3,
  138. row:true,
  139. },
  140. {
  141. label: "网站",
  142. span: 12,
  143. prop: "url",
  144. prepend:'http://',
  145. mock:{
  146. type:'url',
  147. header:false,
  148. },
  149. append:'com',
  150. row:true,
  151. },
  152. {
  153. label: "日期",
  154. prop: "date",
  155. type: "date",
  156. span:8,
  157. format:'yyyy-MM-dd',
  158. valueFormat:'yyyy-MM-dd',
  159. mock:{
  160. type:'datetime',
  161. format:'yyyy-MM-dd'
  162. },
  163. },
  164. {
  165. label: "日期时间",
  166. prop: "datetime",
  167. type: "datetime",
  168. span:8,
  169. format:'yyyy-MM-dd hh:mm:ss',
  170. valueFormat:'yyyy-MM-dd hh:mm:ss',
  171. mock:{
  172. type:'datetime',
  173. format:'yyyy-MM-dd hh:mm:ss',
  174. now:true,
  175. },
  176. },
  177. {
  178. label: "时间",
  179. prop: "time",
  180. type: "time",
  181. span:8,
  182. format:'hh:mm:ss',
  183. valueFormat:'hh:mm:ss',
  184. mock:{
  185. type:'datetime',
  186. format:'hh:mm:ss'
  187. },
  188. },
  189. {
  190. label: "地址",
  191. span: 24,
  192. prop: "address",
  193. mock:{
  194. type:'county'
  195. },
  196. },{
  197. label: "建议",
  198. span: 24,
  199. prop: "adit",
  200. mock:{
  201. type:'word',
  202. min:10,
  203. max:30
  204. },
  205. },{
  206. label: "手机号",
  207. mock:{
  208. type:'phone'
  209. },
  210. span: 12,
  211. prop: "phone",
  212. }]
  213. }
  214. }
  215. },
  216. mounted(){
  217. this.obj.username = 'smallwei'
  218. this.obj.switch = 0;
  219. this.obj.phone='17547400800';
  220. },
  221. methods:{
  222. emptytChange(){
  223. this.$message.success('清空方法回调');
  224. },
  225. submit () {
  226. this.$message.success('当前数据'+JSON.stringify(this.obj));
  227. },
  228. tip(){
  229. this.$message.success('自定义按钮');
  230. }
  231. }
  232. }
  233. </script>

自定义按钮

基础 - 图2

  1. <avue-form ref="form" v-model="obj0" :option="option0">
  2. <template slot="menuForm">
  3. <el-button type="primary" @click="handleSubmit">提 交</el-button>
  4. <el-button @click="handleEmpty">清 空</el-button>
  5. </template>
  6. </avue-form>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. obj0:{},
  12. option0:{
  13. emptyBtn:false,
  14. submitBtn:false,
  15. column: [{
  16. label: "用户名",
  17. prop: "username",
  18. rules: [{
  19. required: true,
  20. message: "请输入用户名",
  21. trigger: "blur"
  22. }]
  23. }]
  24. }
  25. }
  26. },
  27. methods:{
  28. handleEmpty(){
  29. this.$refs.form.resetForm();
  30. },
  31. handleSubmit(){
  32. this.$refs.form.validate(vaild=>{
  33. if(vaild){
  34. this.$message.success(JSON.stringify(this.obj0));
  35. }
  36. })
  37. }
  38. }
  39. }
  40. </script>