根據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好嗎~