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

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

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

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

相关文章
|
JavaScript 测试技术 Python
低成本、快速造测试数据,这个造数工具我后悔推荐晚了!
没有测试数据,所谓的功能测试和性能测试全都是无米之炊。但我发现一个蛮诡异的事情,就是行业内很少会有人去强调测试数据的重要性,甚至市面上都没有人在做测试数据这门生意。
低成本、快速造测试数据,这个造数工具我后悔推荐晚了!
|
XML Java 数据格式
从非诚勿扰看数据索引,优化代码小妙招
从非诚勿扰看数据索引,优化代码小妙招
141 0
网络工程项目报价单应该怎么写?记住这6个步骤准没错!
网络工程项目报价单应该怎么写?记住这6个步骤准没错!
314 0
|
存储 SQL 缓存
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
212 0
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
淘宝预售“买崩”程序员20分钟修复,全靠这份亿级流量并发手册
朋友们,今年双11电商大促即将到达,感受到四面八方激动的心情没有? 去年天猫淘宝在双十一中订单可是破了58.3万笔/秒,预测一波今年成交额又会打破去年记录。作为一名互联网民工,我关心的不是订单有多少,而是系统竟然没崩!以及这背后为了抗住这巨大的并发量的程序员同胞们……
|
开发框架 Java 测试技术
【测试基础】五、这样提bug单,开发小哥还会怼你么?
【测试基础】五、这样提bug单,开发小哥还会怼你么?
【测试基础】五、这样提bug单,开发小哥还会怼你么?
|
前端开发 JavaScript 测试技术
为了降低维护成本(早点下班),我在组件开发中所做的那些优化(偷懒)
组件开发中为了稳定性、健壮性,经常需要为组件编写测试用例,然后还要为了开发者方便使用编写文档,都是非常耗时间的差事。作为一个独立维护组件库的程序员,为了能够降低组件维护的成本(早点下班),我总结了一下自己过去几年为了让组件开发更加高效所做的那些事情(偷的那些懒)。
|
JSON 小程序 数据库
一个月空余时间微信诗词小程序前后端开发上线实践指南
一个月空余时间微信诗词小程序前后端开发上线实践指南
425 0
一个月空余时间微信诗词小程序前后端开发上线实践指南
|
JavaScript 数据库
一个查询功能居然被你玩出了花!(二)
上次是表单控件,这次是查询控件,不要弄混了哦。
一个查询功能居然被你玩出了花!(二)
|
JSON 数据库 数据格式
一个查询功能居然被你玩出了花!(一)
上次是表单控件,这次是查询控件,不要弄混了哦。
一个查询功能居然被你玩出了花!(一)