93 lines
1.6 KiB
Vue
93 lines
1.6 KiB
Vue
<template>
|
|
<el-main>
|
|
<el-card shadow="never" header="分类筛选器">
|
|
<x-select-filter :data="data" :selected-values="selectedValues" :label-width="80" @on-change="change"></x-select-filter>
|
|
</el-card>
|
|
<el-card shadow="never" header="返回值" style="margin-top: 15px;">
|
|
<pre>{{ filterData }}</pre>
|
|
</el-card>
|
|
</el-main>
|
|
</template>
|
|
|
|
<script>
|
|
import xSelectFilter from '@/components/xSelectFilter'
|
|
|
|
export default {
|
|
name: 'selectFilter',
|
|
components: {
|
|
xSelectFilter
|
|
},
|
|
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>
|