Avue

搜索

... 2021-7-29 About 6 min

# 搜索

# 搜索变量

{ "name": "small" }

search变量为搜索的表单对象

{{search}}
<avue-crud :option="option" :search.sync="search" :data="data" >
</avue-crud>
<script>
export default {
  data(){
    return {
       search:{
         name:'small'
       },
       data:[{
         name:'张三'
       }],
       option:{
          column: [{
            label: '姓名',
            prop: 'name',
            search:true,
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Expand Copy

# 搜索按钮文字和图标配置

searchBtnText和emptyBtnText为搜索和清空的文字searchBtnIcon和emptyBtnIcon为搜索和清空的图标

<avue-crud :option="option" :data="data" >
</avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
         name:'张三'
       }],
       option:{
          searchBtnText:'查询',
          searchBtnIcon:'el-icon-user',
          emptyBtnText:'重置',
          emptyBtnIcon:'el-icon-close',
          column: [{
            label: '姓名',
            prop: 'name',
            search:true,
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Expand Copy

# 搜索方法

search-change为点击搜索后执行方法，done方法为关闭等待框,search-reset点击清空的执行方法


<avue-crud :option="option"  :data="data" @search-change="searchChange" @search-reset="resetChange">
</avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
         name:'张三'
       }],
       option:{
          column: [{
            label: '姓名',
            prop: 'name',
            search:true,
          }]
       }
    }
  },
  methods:{
      resetChange(item){
        this.$message.success('清空回调')
      },
      searchChange(params,done) {
        this.$message.success('2s后关闭锁定')
        setTimeout(()=>{
          done();
          this.$message.success(JSON.stringify(params));
        },2000)
        
      }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Expand Copy

# 搜索字段标题宽度

searchLabelWidth为标题的宽度，默认为110，可以配置到option下作用于全部,也可以单独配置每一项

<avue-crud :data="data" :option="option" ></avue-crud>
</avue-crud>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          searchLabelWidth:150,
          column:[
             {
              label:'姓名',
              prop:'name',
              searchLabelWidth:30,
              search:true,
            }, {
              label:'性别',
              prop:'sex',
              search:true,
            }
          ]
        },
      };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Expand Copy

# 搜索字段排序

searchOrder为排序字段，不写默认为0搜索字段排序不影响表格顺序

<avue-crud :data="data" :option="option" ></avue-crud>
</avue-crud>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              search:true,
            }, {
              label:'性别',
              prop:'sex',
              search:true,
              searchOrder:1
            }
          ]
        },
      };
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
Expand Copy

# 搜索过滤

{ "cascader": [ 0, 1 ], "tree": 0 }

<el-button size="small" type="danger" @click="filterDic">过滤数据字典</el-button>
<el-button size="small" type="success" @click="filterNull">过滤空数据</el-button>
<el-button size="small" type="primary" @click="filter">不过滤</el-button>
<p>{{search}}</p>
<avue-crud :key="reload" :data="data" :search.sync="search" :option="option" ></avue-crud>

<script>
export default {
    data() {
      return {
        search:{
          cascader:[0,1],
          tree:0
        },
        reload:Math.random(),
        data: [{
          cascader:[0,1],
          tree:0
        }],
        option:{
          column:[{
            label:'姓名',
            prop:'name',
            search:true
          },{
              label:'级别',
              prop:'cascader',
              type:'cascader',
              search:true,
              dicData:[{
                label:'一级',
                value:0,
                children:[
                  {
                    label:'一级1',
                    value:1,
                  },{
                    label:'一级2',
                    value:2,
                  }
                ]
              }],
            },
            {
              label:'树型',
              prop:'tree',
              type:'tree',
              search:true,
              dicData:[{
                label:'一级',
                value:0,
                children:[
                  {
                    label:'一级1',
                    value:1,
                  },{
                    label:'一级2',
                    value:2,
                  }
                ]
              }]
            }]
        }
      }
    },
    methods:{
      refresh(){
        this.reload=Math.random()
      },
      filter(){
        this.option.searchFilterDic=false
        this.option.searchFilterNull=false
        this.refresh()
      },
      filterDic(){
        this.option.searchFilterDic=true
        this.refresh()
      },
      filterNull(){
        this.option.searchFilterNull=true
        this.refresh()
      }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
Expand Copy

# 搜索验证规则

Tips

具体参考async-validator (opens new window)

配置验证字段的searchRules的数据对象即可，

<avue-crud :option="option" :data="data">
</avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
         name:'张三'
       }],
       option:{
          column: [{
            label: '姓名',
            prop: 'name',
            search:true,
            searchRules: [{
              required: true,
              message: "请输入姓名",
              trigger: "blur"
            }]
          },{
            label: '日期',
            prop: 'date',
            type:'datetime'
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Expand Copy

# 搜索范围和宽度

searchSpan搜索框的宽度，searchRange配置后可以开启范围搜索

<avue-crud :option="option" :data="data">
</avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
         name:'张三'
       }],
       option:{
          column: [{
            label: '姓名',
            prop: 'name',
            search:true,
          },{
            label: '日期',
            prop: 'date',
            type:'datetime',
            searchSpan:18,
            searchRange:true,
            search:true,
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Expand Copy

# 搜索默认值

searchValue为搜索的默认值

<avue-crud :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
         name:'张三'
       }],
       option:{
          column: [{
            label: '姓名',
            prop: 'name',
            searchValue:'small',
            search:true
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy

# 局部展开收缩

searchIcon是否启用功能按钮, searchIndex配置收缩展示的个数,默认为2个

<avue-crud :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[
         {
          text1:'文本1',
          text2:'文本2'
         }
       ],
       option:{
          searchIndex:3,
          searchIcon:true,
          column: [{
            label: '内容1',
            prop: 'text1',
            search:true,
          },{
            label: '内容2',
            prop: 'text2',
            search:true,
          },{
            label: '内容3',
            prop: 'text3',
            search:true,
          },{
            label: '内容4',
            prop: 'text4',
            search:true,
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Expand Copy

# 辅助提示语

searchTip为提示的内容,searchTipPlacement为提示语的方向，默认为bottom

<avue-crud :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[
         {
          text1:'文本1',
          text2:'文本2'
         }
       ],
       option:{
          column: [{
            label: '内容1',
            prop: 'text1',
            search:true,
            searchTip:'我是一个默认提示语',
          },{
            label: '内容2',
            prop: 'text2',
            search:true,
            searchTip:'我是一个左边提示语',
            searchTipPlacement:'left',
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Expand Copy

# 隐藏搜索折叠按钮

searchShowBtn设置为:false

<avue-crud :option="option" :data="data" >
</avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
         name:'张三'
       }],
       option:{
          searchShowBtn:false,
          column: [{
            label: '姓名',
            prop: 'name',
            search:true
          },{
            label: '日期',
            prop: 'date',
            type:'datetime',
            search:true
          }]
       }
    }
  },
  methods:{

  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Expand Copy

# 按钮是否单独成行

前提的searchMenuSpan可以控制搜索按钮的长度

<avue-crud :option="option" :data="data" ></avue-crud>
<script>
export default {
  data(){
    return {
       data:[
         {
          text1:'文本1',
          text2:'文本2'
         }
       ],
       option:{
          searchMenuSpan:8,
          column: [{
            label: '内容1',
            prop: 'text1',
            search:true,
          },{
            label: '内容2',
            prop: 'text2',
            search:true,
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Expand Copy

# 定义类型

searchType属性可以重新定义搜索框的类型

<avue-crud :option="option"  :data="data" ></avue-crud>
<script>
var dic=[{
  label:'选项1',
  value:1
},{
  label:'选项2',
  value:2
}]
export default {
  data(){
    return {
       search:{},
       data:[{
         selects:[1,2],
         select:1
       }],
       option:{
          column: [{
            label: '多选框',
            prop: 'selects',
            type:'select',
            multiple:true,
            search:true,
            searchType:"checkbox",
            searchSpan:24,
            dicData:dic
          },{
            label: '单选框',
            prop: 'select',
            type:'select',
            search:true,
            searchType:"radio",
            searchSpan:24,
            dicData:dic
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
Expand Copy

# 自定义搜索卡槽

search和searchMenu卡槽可以自定义搜索内容，不需要单独设置列search:true

<avue-crud :option="option" :search.sync="search" :data="data" >
  <template slot="searchMenu"  slot-scope="{row,size}">
      <el-button :size="size" @click="searchSubmit(row)">自定义提交</el-button>
  </template>
  <template slot="search" slot-scope="{row,size}">
    <el-tag>标题</el-tag>
    <el-input placeholder="自定义输入框" :size="size" style="width:200px" v-model="search.slot"></el-input>
  </template>
</avue-crud>
<script>
export default {
  data(){
    return {
       search:{},
       data:[{
         name:'张三'
       }],
       option:{
          column: [{
            label: '姓名',
            prop: 'name'
          },{
            label: '日期',
            prop: 'date',
            type:'datetime'
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Expand Copy

# 自定义列搜索

Tips

2.2.3+

配置searchslot为true即可开启自定义，列的prop加Search作为卡槽的名称，

<avue-crud :option="option" :data="data" :search.sync="search">
  <template slot-scope="{disabled,size}" slot="ageSearch">
     <el-slider  :disabled="disabled" :size="size" v-model="search.age"></el-slider>
  </template>
</avue-crud>
<script>
export default {
  data(){
    return {
       search:{},
       data:[{
         name:'张三',
         age:18,
       }],
       option:{
          column: [{
            label: '姓名',
            prop: 'name',
            search:true,
          },{
            label: '年龄',
            prop: 'age',
            search:true,
          }]
       }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Expand Copy

# 多级联动

Tips

2.9.0+

cascader为需要联动的子选择框prop值，可以写多个，形成一对多的关系,需要手动调用内部的dicInit方法去初始化表格联动数据

<avue-crud ref="crud" :option="option" :data="data" ></avue-crud>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data(){
    return {
      data:[ {
        id: 1,
        name: '张三',
        province: '110000',
        city: '110100',
        area: '110101',
      },
      {
        id: 2,
        name: '李四',
        province: '140000',
        city: '140600',
        area: '140623'
      }],
       option:{
          excelBtn:true,
          column: [{
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            cascader: ['city'],
            search:true,
            dicUrl: `${baseUrl}/getProvince`,
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '城市',
            prop: 'city',
            type: 'select',
            cascader: ['area'],
            props: {
              label: 'name',
              value: 'code'
            },
            search:true,
            dicUrl: `${baseUrl}/getCity/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择城市',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '地区',
            prop: 'area',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            search:true,
            dicUrl: `${baseUrl}/getArea/{{key}}`,
            rules: [
              {
                required: true,
                message: '请选择地区',
                trigger: 'blur'
              }
            ]
          }]
       }
    }
  },
  mounted() {
    this.$nextTick(()=>this.$refs.crud.dicInit('cascader'))
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
Expand Copy

# 单独日期搜索

Tips

2.2.2+

配置dateBtn为true即可激活,搜索后回调date-change方法

<avue-crud ref="crud" @date-change="dateChange":option="option" :data="data" ></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2'
       },{
          text1:'内容2-1',
          text2:'内容2-2'
       },{
          text1:'内容3-1',
          text2:'内容3-2'
       }],
       option:{
          dateBtn:true,
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }]
       }
    }
  },
  methods:{
    dateChange(date){
      this.$message.success(JSON.stringify(date));
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Expand Copy
Last update: October 16, 2022 17:07
Contributors: smallwei

表头配置

您正在浏览基于 Vue 2.x 的 Avue 文档; 点击这里 查看 Vue 3.x 的升级版本