From 0a57f08fc2b44d54207a87e75890a639c18ff504 Mon Sep 17 00:00:00 2001 From: sakuya <81883387@qq.com> Date: Sat, 31 Jul 2021 00:06:59 +0800 Subject: [PATCH] Update filterbar2.vue --- src/views/vab/filterbar2.vue | 192 +++++++++++++++++++++++++++++------ 1 file changed, 160 insertions(+), 32 deletions(-) diff --git a/src/views/vab/filterbar2.vue b/src/views/vab/filterbar2.vue index 2610db24..53e6bef7 100644 --- a/src/views/vab/filterbar2.vue +++ b/src/views/vab/filterbar2.vue @@ -14,56 +14,85 @@ - + - -

过滤项

- - 1 - - - - - - - - 2 - - - - - - +
+

设置过滤条件

- + - 增加过滤项 + + + + + + + + + + + + + + +
+ {{index+1}} + + + + + + + + + + + + + + + + + + + + +
+ 增加过滤项 +
- 默认标签 +
    +
    • +
    • +
- 立即过滤 - 保存常用 + 立即过滤 + 保存常用 重置 @@ -82,26 +111,125 @@ form: { checkboxGroup1: ['1'], radio1: '' - } + }, + fields: [ + { + label: 'ID', + value: 'id', + type: 'text', + selected: true, + placeholder: '请输入ID' + }, + { + label: '姓名', + value: 'name', + type: 'text', + placeholder: '请输入姓名' + }, + { + label: '类型', + value: 'type', + type: 'select', + selected: true, + placeholder: '请选择类型', + extend: { + //multiple: true, + data: [ + { + label: "选项1", + value: "1" + }, + { + label: "选项2", + value: "2" + } + ] + } + }, + { + label: '注册日期', + value: 'date', + type: 'datetime', + placeholder: '请选择日期时间' + }, + { + label: '有效期', + value: 'date2', + type: 'datetimerange', + placeholder: '请选择日期时间' + }, + { + label: '是否警用', + value: 'switch', + type: 'switch' + } + ], + filter: [] } }, mounted() { - + //默认显示 + this.fields.forEach((item) => { + if(item.selected){ + this.filter.push({ + field: item, + value: '' + }) + } + }) }, methods: { openFilter(){ this.drawer = true + }, + addFilter(){ + this.filter.push({ + field: this.fields[0], + value: '' + }) + }, + delFilter(index){ + console.log(index) + this.filter.splice(index, 1) + }, + ok(){ + console.log(this.filter); + }, + fieldChange(tr){ + tr.value = '' + }, + savemy(){ + this.$prompt('请输入常用过滤名称', '提示', { + inputPlaceholder: '请输入常用过滤名称' + }) + .then(({ value }) => { + console.log(value); + }) + .catch(() => { + // + }) } } }