关于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好吗~