一个查询功能居然被你玩出了花!(四)

简介: 上次是表单控件,这次是查询控件,不要弄混了哦。

8

 使用方式  

<template>
<nf-find
v-model="query"
v-bind="formProps"
/>
查询条件:{{query}}
<findGrid :dataList="dataList"/>
<findPager/>
template>


模板部分比较简单了,设置好属性即可。


import { reactive, watch } from'vue'
// 组件
import findCom from'../control-web/nf-el-find/el-find-div.vue'
import findGrid from'./find-grid.vue'
import findPager from'./find-pager.vue'
// 加载json文件
import json from'/json/find-test.json'
// 数据列表的状态
import dataListControl from'../control/data-list'
exportdefault {
name: 'eleFindComponent',
components: {
findGrid,
findPager,
'nf-find': findCom
},
setup () {
const query = reactive({})
const findTest = json.findTest
// 设置查询控件的属性
const findProps = reactive({})
// 添加重新绑定的开关
findProps.reload = false
// 模拟异步加载meta
Object.assign(findProps, findTest.baseProps)
findProps.itemMeta = findTest.itemMeta // 表单子控件的属性
findProps.findKind = findTest.findKind // 查询方式
return {
query,
dataList,
// 渲染表单的meta
findProps 
}
}
}


这里主要是加载json文件,然后给查询控件设置属性。

然后获得查询条件,提交给后端API申请数据即可。


json 文件的格式

比较长,发个图片示意一下:


101.png


查询控件需要的 json 数据

更多代码欢迎查看源码。

9

 源码  

https://gitee.com/naturefw/nf-vite2-element

10

 在线演示  

https://naturefw.gitee.io/nf-vue-cdn/elecontrol/

本文作者:自然框架

个人网址:jyk.cnblogs.com

声明:本文为 脚本之家专栏作者 投稿,未经允许请勿转载。

相关文章
|
5月前
|
机器学习/深度学习 搜索推荐
一招告别百度广告烦恼,同时效率提高100倍的几个常用搜索技巧!
一招告别百度广告烦恼,同时效率提高100倍的几个常用搜索技巧!
|
6月前
小脑袋吃球球动态代码免费分享
小脑袋吃球球动态代码免费分享,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面
38 2
|
6月前
|
JavaScript API
【源码共读】组件太多,重复工作量大?这次一行命令带你解放双手!
【源码共读】组件太多,重复工作量大?这次一行命令带你解放双手!
72 0
|
XML Java 数据格式
从非诚勿扰看数据索引,优化代码小妙招
从非诚勿扰看数据索引,优化代码小妙招
141 0
|
传感器
时隔这么长时间,我把常用的功能整理好了,再来感受VueUse工具库的优雅吧~
时隔这么长时间,我把常用的功能整理好了,再来感受VueUse工具库的优雅吧~
时隔这么长时间,我把常用的功能整理好了,再来感受VueUse工具库的优雅吧~
|
存储 SQL 缓存
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
214 0
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
|
开发框架 Java 测试技术
【测试基础】五、这样提bug单,开发小哥还会怼你么?
【测试基础】五、这样提bug单,开发小哥还会怼你么?
【测试基础】五、这样提bug单,开发小哥还会怼你么?
|
JSON 小程序 数据库
一个月空余时间微信诗词小程序前后端开发上线实践指南
一个月空余时间微信诗词小程序前后端开发上线实践指南
427 0
一个月空余时间微信诗词小程序前后端开发上线实践指南
|
JavaScript 数据库
一个查询功能居然被你玩出了花!(二)
上次是表单控件,这次是查询控件,不要弄混了哦。
一个查询功能居然被你玩出了花!(二)
|
JSON 数据库 数据格式
一个查询功能居然被你玩出了花!(一)
上次是表单控件,这次是查询控件,不要弄混了哦。
一个查询功能居然被你玩出了花!(一)
下一篇
无影云桌面