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

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

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月前
|
前端开发 大数据 数据库
临时抱佛脚必看|一个月速通高级系统架构设计师!(低分飘过版)
本文写给已决定报考高级软件架构设计师的同学,从软考报名到正式考试,有40天时间,本文纯应试备考经验,一个月速成,仅供参考。
|
前端开发
【简历优化平台开发教程-11】期望薪资
【简历优化平台开发教程-11】期望薪资
新增节添加代码【滴水逆向三期46笔记】
新增节添加代码【滴水逆向三期46笔记】
|
XML Java 数据格式
从非诚勿扰看数据索引,优化代码小妙招
从非诚勿扰看数据索引,优化代码小妙招
147 0
|
存储 SQL 缓存
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
229 0
如何设计一个支持一亿用户的系统,心中有方案遇事不慌!
|
JSON 小程序 数据库
一个月空余时间微信诗词小程序前后端开发上线实践指南
一个月空余时间微信诗词小程序前后端开发上线实践指南
445 0
一个月空余时间微信诗词小程序前后端开发上线实践指南
|
JavaScript 数据库
一个查询功能居然被你玩出了花!(二)
上次是表单控件,这次是查询控件,不要弄混了哦。
一个查询功能居然被你玩出了花!(二)
|
JSON 数据库 数据格式
一个查询功能居然被你玩出了花!(一)
上次是表单控件,这次是查询控件,不要弄混了哦。
一个查询功能居然被你玩出了花!(一)
|
存储 Java C#
程序老鸟C#学习:5天学会全部基础--第二天
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
141 0
一个查询功能居然被你玩出了花!(三)
上次是表单控件,这次是查询控件,不要弄混了哦。