搜索

例子

搜索 - 图1

用法和crud组件用法一致

  1. <avue-search :option="option" v-model="form" @change="handleChange"></avue-search>
  2. <script>
  3. export default {
  4. data() {
  5. return {
  6. form: {
  7. zt: ["370000", "620000", "610000", "110000", "410000"],
  8. checkbox: 0,
  9. jtgj: [0, 1, 2, 3, 4]
  10. },
  11. option: {
  12. card: true,
  13. column: [{
  14. label: '地区',
  15. prop: 'zt',
  16. dicData:'zt',
  17. dicUrl: 'https://cli2.avue.top/api/area/getProvince',
  18. props: {
  19. label: 'name',
  20. value: 'code'
  21. }
  22. }, {
  23. label: '多选',
  24. prop: 'checkbox',
  25. multiple: false,
  26. dicData: [{
  27. label: '单层',
  28. value: 0
  29. }, {
  30. label: '多层',
  31. value: 1
  32. }]
  33. }, {
  34. label: '交通工具',
  35. prop: 'jtgj',
  36. dicData: [{
  37. label: '飞机',
  38. value: 0
  39. }, {
  40. label: '动车',
  41. value: 1
  42. }, {
  43. label: '驾车',
  44. value: 2
  45. }, {
  46. label: '其他',
  47. value: 3
  48. }]
  49. }]
  50. }
  51. }
  52. },
  53. methods: {
  54. handleChange(form) {
  55. this.$message.success(JSON.stringify(form))
  56. }
  57. }
  58. }
  59. </script>

Events

事件名说明参数
change当搜索的值发生改变时的回调form