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

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

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月前
|
JavaScript
网页课程设计-期末大作业-简单设计【原神狂喜】
本文介绍了一个以“原神”为主题的网页课程设计项目,包括登录页、博客首页、文件上传页面、相册页面和留言板页面的设计与实现,并提供了完整的源代码下载链接。
网页课程设计-期末大作业-简单设计【原神狂喜】
|
6月前
|
存储 前端开发 JavaScript
太爽了!这12个前端库,帮我在工作中赢得了不少摸鱼时间!!
太爽了!这12个前端库,帮我在工作中赢得了不少摸鱼时间!!
|
存储 区块链
Jogger慢跑者/stepn跑鞋链游模式系统开发详细功能/案例项目/源码程序
区块链的核心技术之一就是公开且透明的交易信息。一般情况下,在区块链内产生、流转和存储的信息是对所有节点用户开放的,其高度的透明化也使得区块内的所有人都能够查看数据的所有相关信息同时使用其应用。因此,区块链技术在信息共享与数据交换领域具有一定的优势。
|
9月前
|
数据采集 NoSQL 搜索推荐
五一假期畅游指南:Python技术构建的热门景点分析系统解读
五一假期畅游指南:Python技术构建的热门景点分析系统解读
农场养成种树游戏开发逻辑源码解析
开发一个农场养成种树游戏可以为玩家提供种植和养护树木的体验,同时也可以学习有关农业和环境保护的知识。 以下是一个简单的农场养成种树游戏的开发源码demo,供参考:
|
数据库
第一遍阅读之《信息系统开发与管理》(二战)
第二次学习信息系统开发与管理,第一感觉是:必过! 信息系统开发与管理距离我们软件的具体开发很近,在我们生物专业学习过程中,有一门课程叫做《食品仪器分析》,其中有一章节的内容讲的大概是建立一个工厂的过程是怎么样的。这其中的方法和我们的《信息系统开发与管理》的内容有异曲同工之妙,我们要建立的是一个工厂,但是摆脱不了和周围事物的联系。
|
XML Java 数据格式
从非诚勿扰看数据索引,优化代码小妙招
从非诚勿扰看数据索引,优化代码小妙招
161 0
|
JavaScript
小明特别喜欢打扑克牌,除了喜欢斗地主和德州扑克之外,还喜欢一种叫桥牌的游戏,桥牌的具体规则相当复杂,有叫牌、打牌和计分三个阶段,还有不断变化的局况,局况可能影响叫牌打牌策略。但是小明暂时不关心这一些,
小明特别喜欢打扑克牌,除了喜欢斗地主和德州扑克之外,还喜欢一种叫桥牌的游戏,桥牌的具体规则相当复杂,有叫牌、打牌和计分三个阶段,还有不断变化的局况,局况可能影响叫牌打牌策略。但是小明暂时不关心这一些,
399 0
|
JavaScript 数据库
一个查询功能居然被你玩出了花!(二)
上次是表单控件,这次是查询控件,不要弄混了哦。
一个查询功能居然被你玩出了花!(二)
|
JSON 数据库 数据格式
一个查询功能居然被你玩出了花!(一)
上次是表单控件,这次是查询控件,不要弄混了哦。
一个查询功能居然被你玩出了花!(一)

热门文章

最新文章