根据JSON自动构建的vue筛选框组件
2020/7/21 14:03:52
本文主要是介绍根据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好吗~
这篇关于根据JSON自动构建的vue筛选框组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)