Vue filter box component built automatically according to JSON

Time:2020-8-16

background

My team is mainly internal oriented and develops internal platform. Most of the pages have the following structure: filter box + table; the Vue UI framework selection in the group is view design. The table component of view design supports the use of JSON to automatically build the table, but does not provide the filter box component. Although there are input and select components, they need to be written every timeDuplicate code!

Therefore, if there is a component that supports the input of JSON configuration, and then automatically builds the filter box according to JSON, you can greatly increase theImprove efficiency! vue-filter-boxIt’s such a component!

function

vue-filter-boxbe based onview-design, so you need to install it firstview-design

Components are passed inmodelAutomatically build filter box, and support a variety of common component types: input, inputnumber, select, etc

<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: 'input box',
              width: '300px'
            },
            inputNumber: {
              component: 'InputNumber',
              Title: 'digital input box',
              width: '300px'
            },
            select: {
              component: 'Select',
              Title: 'search box',
              width: '300px',
              options: [
                {label: 'option1', value: 0},
                {label: 'option2', value: 1}
              ],
              prop: {
                multiple: true
              }
            }
          },
          filterValue: {
            Input: 'this is an input box',
            inputNumber: 50,
            select: [1]
          }
      }
    }
  }
</script>

Vue filter box component built automatically according to JSON

How to use it

For specific usage, please refer to the component documentation: https://github.com/ruofee/vue-filter-box

last

How can components bring convenience to you? How about a star~