关于vue.js:根据JSON自动构建的vue筛选框组件

背景

我所在的小组次要面向外部, 开发外部平台, 大多数页面都存在以下的构造: 筛选框 + 表格; 小组内vue UI框架选型为view-design, view-design的Table组件反对应用JSON主动构建出表格, 然而并没有提供筛选框组件; 只管有提供Input, Select等组件, 然而每次都须要写反复的代码!

因而, 若是有一款组件, 反对传入JSON配置, 再依据JSON主动构建出筛选框, 便能够大大晋升效率! vue-filter-box便是这么一款组件!

性能

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: '输入框',              width: '300px'            },            inputNumber: {              component: 'InputNumber',              title: '数字输入框',              width: '300px'            },            select: {              component: 'Select',              title: '搜寻框',              width: '300px',              options: [                {label: 'option1', value: 0},                {label: 'option2', value: 1}              ],              prop: {                multiple: true              }            }          },          filterValue: {            input: '这是一个输入框',            inputNumber: 50,            select: [1]          }      }    }  }</script>

如何应用

具体用法请查阅组件文档: https://github.com/ruofee/vue-filter-box

最初

如何组件给你带来便当的话, 给个star好吗~