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 文件的格式
比较长,发个图片示意一下:
查询控件需要的 json 数据
更多代码欢迎查看源码。
9
源码
https://gitee.com/naturefw/nf-vite2-element
10
在线演示
https://naturefw.gitee.io/nf-vue-cdn/elecontrol/
本文作者:自然框架
个人网址:jyk.cnblogs.com
声明:本文为 脚本之家专栏作者 投稿,未经允许请勿转载。