根據JSON自動構建的vue篩選框元件

Ruofee發表於2020-07-21
JSONVue元件

背景

我所在的小組主要面向內部, 開發內部平臺, 大多數頁面都存在以下的結構: 篩選框 + 表格; 小組內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>

demo1

如何使用

具體用法請查閱元件文件: https://github.com/ruofee/vue-filter-box

最後

如何元件給你帶來便利的話, 給個star好嗎~

相關文章