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
88
89
90
91
92
| <template>
| <el-main>
| <el-card shadow="never" header="分类筛选器">
| <sc-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></sc-select-filter>
| </el-card>
| <el-card shadow="never" header="返回值" style="margin-top: 15px;">
| <pre>{{ filterData }}</pre>
| </el-card>
| </el-main>
| </template>
|
| <script>
| import scSelectFilter from '@/components/scSelectFilter'
|
| export default {
| name: 'selectFilter',
| components: {
| scSelectFilter
| },
| data() {
| return {
| data: [
| {
| title: "状态(单)",
| key: "state",
| options: [
| {
| label: "全部",
| value: ""
| },
| {
| label: "待审核",
| value: "1",
| icon: "el-icon-flag"
| },
| {
| label: "已退回",
| value: "2",
| icon: "el-icon-bottom-left"
| },
| {
| label: "已关闭",
| value: "3",
| icon: "el-icon-circle-close"
| },
| {
| label: "已完成",
| value: "4",
| icon: "el-icon-checked"
| }
| ]
| },
| {
| title: "类型(多)",
| key: "type",
| multiple: true,
| options: [
| {
| label: "全部",
| value: ""
| },
| {
| label: "请假申请",
| value: "1"
| },
| {
| label: "加班申请",
| value: "2"
| }
| ]
| }
| ],
| selectedValues: {
| state: [""],
| type: [""]
| },
| filterData: {}
| }
| },
| mounted() {
|
| },
| methods: {
| change(selected){
| this.filterData = selected
| }
| }
| }
| </script>
|
| <style>
| </style>
|
|
