• 根据JSON自动构建的vue筛选框组件


    背景

    我所在的小组主要面向内部, 开发内部平台, 大多数页面都存在以下的结构: 筛选框 + 表格; 小组内vue UI框架选型为view-design, view-design的Table组件支持使用jsON自动构建出表格, 但是并没有提供筛选框组件; 尽管有提供Input, Select等组件, 但是每次都需要写重复的代码!

    因此, 若是有一款组件, 支持传入jsON配置, 再根据JSON自动构建出筛选框, 便可以大大提升效率vue-filter-box便是这么一款组件!

    秒收目录站https://www.tomove.com.cn

    功能

    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: '输入框',
                   '300px'
                },
                inputNumber: {
                  component: 'InputNumber',
                  title: '数字输入框',
                   '300px'
                },
                select: {
                  component: 'Select',
                  title: '搜索框',
                   '300px',
                  options: [
                    {label: 'option1', value: 0},
                    {label: 'option2', value: 1}
                  ],
                  prop: {
                    multiple: true
                  }
                }
              },
              filterValue: {
                input: '这是一个输入框',
                inputNumber: 50,
                select: [1]
              }
          }
        }
      }
    </script>
  • 相关阅读:
    04机器学习实战之朴素贝叶斯
    06Web服务
    03机器学习实战之决策树scikit-learn实现
    03机器学习实战之决策树
    将两个列表合并为字典_其中一个列表为Key_一个列表为Value
    17反射
    16网络通信协议
    百练 2733 判断闰年 解题报告
    百练 2799 浮点数格式 解题报告
    lucene详细介绍
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/13704836.html
Copyright © 2020-2023  润新知