Search 搜索

常用的表格或则列表的搜索组件，可以与form和crud等其他组件组合使用

TIP

1.0.0+

普通用法

Search 搜索 - 图1

使用方法和常规用法一样option配置结构体，v-model为双向数据绑定，同时包含了一个change回调事件

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

Events

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