背景
我所在的小组主要面向内部, 开发内部平台, 大多数页面都存在以下的结构: 筛选框 + 表格; 小组内vue UI框架选型为view-design, view-design的Table组件支持使用jsON自动构建出表格, 但是并没有提供筛选框组件; 尽管有提供Input, Select等组件, 但是每次都需要写重复的代码!
因此, 若是有一款组件, 支持传入jsON配置, 再根据JSON自动构建出筛选框, 便可以大大提升效率! vue-filter-box便是这么一款组件!
秒收目录站https://www.tomove.com.cn
功能
vue-filter-box基于view-design, 因此需要先安装view-design
组件通过传入model自动构建筛选框, 并支持多种常见的组件类型: Input, InputNumber, Select等:
<template>
<vue-filter-box v-model="filterValue" :model="model"></vue-filter-box>
</template>
<script>
import {VueFilterBox} from 'vue-filter-box'
export default {
name: 'App',
components: {
VueFilterBox
},
data() {
return {
model: {
input: {
component: 'Input',
title: '输入框',
'300px'
},
inputNumber: {
component: 'InputNumber',
title: '数字输入框',
'300px'
},
select: {
component: 'Select',
title: '搜索框',
'300px',
options: [
{label: 'option1', value: 0},
{label: 'option2', value: 1}
],
prop: {
multiple: true
}
}
},
filterValue: {
input: '这是一个输入框',
inputNumber: 50,
select: [1]
}
}
}
}
</script>