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