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

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

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
|
5月前
|
JavaScript API
【源码共读】组件太多,重复工作量大?这次一行命令带你解放双手!
【源码共读】组件太多,重复工作量大?这次一行命令带你解放双手!
38 0
|
8月前
|
数据采集 Web App开发 JavaScript
我写了一个自动化脚本涨粉,从0阅读到接近100粉丝(一)
我写了一个自动化脚本涨粉,从0阅读到接近100粉丝
68 0
|
10月前
|
存储 前端开发 数据库
闲谈时间
闲谈时间
47 0
|
XML Java 数据格式
从非诚勿扰看数据索引,优化代码小妙招
从非诚勿扰看数据索引,优化代码小妙招
115 0
|
存储 SQL 缓存
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
157 0
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
|
移动开发 前端开发 小程序
不愧是前端老油条,分分钟看出我方案的bug
国庆前刚开发完一个小需求,常规性的做了一次code review,不过这次review有所不同,我们组前端老油条竟然参会了,平时发会邀都不来的。 不过不愧是老油条,竟然分分中发现了问题,老油条的地位又在我们小前端的心里巩固了一下。 和往常一样,review前先过一遍技术方案,一让大家快速的了解需求,二来分析下技术方案是否存在问题,是否合理,一般情况下,技术方案没问题,后面的代码review感觉就没啥必要了,因为很少有人听。
113 0
不愧是前端老油条,分分钟看出我方案的bug
淘宝预售“买崩”程序员20分钟修复,全靠这份亿级流量并发手册
朋友们,今年双11电商大促即将到达,感受到四面八方激动的心情没有? 去年天猫淘宝在双十一中订单可是破了58.3万笔/秒,预测一波今年成交额又会打破去年记录。作为一名互联网民工,我关心的不是订单有多少,而是系统竟然没崩!以及这背后为了抗住这巨大的并发量的程序员同胞们……
|
开发框架 Java 测试技术
【测试基础】五、这样提bug单,开发小哥还会怼你么?
【测试基础】五、这样提bug单,开发小哥还会怼你么?
【测试基础】五、这样提bug单,开发小哥还会怼你么?
|
机器学习/深度学习 存储 人工智能
程序员饭碗不保了?GPT-3 最强应用发布,动动手指就自动写代码的神器来了!...
程序员饭碗不保了?GPT-3 最强应用发布,动动手指就自动写代码的神器来了!...
1829 0
程序员饭碗不保了?GPT-3 最强应用发布,动动手指就自动写代码的神器来了!...