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

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

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

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

相关文章
|
8月前
我写了一个自动化脚本涨粉,从0阅读到接近100粉丝(二)
我写了一个自动化脚本涨粉,从0阅读到接近100粉丝
58 0
|
JavaScript 测试技术 Python
低成本、快速造测试数据,这个造数工具我后悔推荐晚了!
没有测试数据,所谓的功能测试和性能测试全都是无米之炊。但我发现一个蛮诡异的事情,就是行业内很少会有人去强调测试数据的重要性,甚至市面上都没有人在做测试数据这门生意。
低成本、快速造测试数据,这个造数工具我后悔推荐晚了!
|
4天前
|
SQL 安全 搜索推荐
sqlmap使用教程(1)-指定目标,掌握这十个搜索技巧让你的工作效率至上提高十倍
sqlmap使用教程(1)-指定目标,掌握这十个搜索技巧让你的工作效率至上提高十倍
|
6天前
|
JavaScript API
【源码共读】组件太多,重复工作量大?这次一行命令带你解放双手!
【源码共读】组件太多,重复工作量大?这次一行命令带你解放双手!
40 0
|
8月前
|
数据采集 Web App开发 JavaScript
我写了一个自动化脚本涨粉,从0阅读到接近100粉丝(一)
我写了一个自动化脚本涨粉,从0阅读到接近100粉丝
71 0
|
XML Java 数据格式
从非诚勿扰看数据索引,优化代码小妙招
从非诚勿扰看数据索引,优化代码小妙招
116 0
|
安全 Java Linux
正确认识及掌握时间的用法
时间是一个相对地区而言的概念,因此有一个基准地区,就是本初子午线穿过的地区。了解世界时间相关的概念可以更好地协调全球人们的活动,便于跨越不同地区的时差。比如按照UTC时区划分算,洛杉矶和北京 之间的时间差异是16个小时, 但是一旦洛杉矶启用了夏令时两者之间的时间差异只有15个小时,神奇吗?
191 0
正确认识及掌握时间的用法
|
存储 SQL 缓存
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
157 0
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
|
JSON 小程序 数据库
一个月空余时间微信诗词小程序前后端开发上线实践指南
一个月空余时间微信诗词小程序前后端开发上线实践指南
一个月空余时间微信诗词小程序前后端开发上线实践指南
一个查询功能居然被你玩出了花!(三)
上次是表单控件,这次是查询控件,不要弄混了哦。