使用sys:gridselect标签实现选择框

参数详解

1、url:数据源

2、id:id

3、name:实体类中关联的属性名称(例: name="titleId" )

4、value:用EL表达式取出的id (例: value="${ examContents.id }" )

5、labelName:展示的属性名(例: labelName="contents.title";注意:必须带点. )

6、lableValue:用EL表达式取出的展示的内容(例:labelValue="${ examContents.title }" )

7、title:Grid选择框的标题

8、cssClass:css样式

9、filldL ables:Grid选择框显示的属性标签可以写多个(例如:“章节 | 题目名称” )

10、fieldKeys:Grid选择框显示的属性名-可以写多个(例:"testName | title" )

11、searchLabels:Grid选择框的搜索的属性标签可以多个(例:“章节 | 地址” )

12、searchKeys:Grid选择框的搜索的属性名可以写多个(例:”testName | title“ )

代码示例:

<sys:gridselect 
url="${ctx}/edu/exam/contents/data" 
id="contents" name="titleId" value="${examContents.id}" 
labelName="contents.title" labelValue="${examContents.title}" 
title="选择题目" cssClass="form-control " 
fieldLabels="章节|题目名称" fieldKeys="testName|title" 
searchLabels="章节|题目名称" searchKeys="testName|title" >
</sys:gridselect>

 

帮我分析一下为什么<!-- *Author:jxx *Contact:283591387@qq.com *代码由框架生成,任何更改都可能导致被代码生成器覆盖 *业务请在@/extension/system/project/Sys_Project_Info.jsx此处编写 --> <template> <view-grid ref="grid" :columns="columns" :detail="detail" :editFormFields="editFormFields" :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions" :table="table" :extend="extend" > </view-grid> </template> <script> import extend from '@/extension/system/project/Sys_Project_Info.jsx' import { sortOrders } from 'element-plus/es/components/table-v2/src/constants' import { ref, defineComponent } from 'vue' export default defineComponent({ setup() { const table = ref({ key: 'id', footer: 'Foots', cnName: '项目信息', name: 'project/Sys_Project_Info', url: '/Sys_Project_Info/', sortName: 'id', sortOrders: ['asc'] }) const editFormFields = ref({"pro_type":""}) const editFormOptions = ref([[{"dataKey":"Pro_Type","data":[],"title":"产品大类","field":"pro_type","type":"select"}]]) const searchFormFields = ref({ code: '', name: '', org: '' }) const searchFormOptions = ref([ [ { title: '项目编码', field: 'code', type: 'like' }, { title: '项目名称', field: 'name', type: 'like' }, { title: '所属组织', field: 'org', type: 'like' } ] ]) const columns = ref([ { field: 'id', title: 'id', type: 'int', width: 110, hidden: true, require: true, align: 'left', sortable: true }, { field: 'pro_type', title: '产品大类', type: 'string', bind:{ key:'Pro_Type',data:[]}, width: 110, require: true, align: 'left', sort: true }, { field: 'code', title: '项目编码', type: 'string', width: 110, require: true, align: 'left', sort: true }, { field: 'name', title: '项目名称', type: 'string', width: 110, require: true, align: 'left' }, { field: 'org', title: '所属组织', type: 'string', width: 110, align: 'left' }, { field: 'cgr', title: '项目类型', type: 'string', width: 110, align: 'left' }, { field: 'enum_factory', title: '涉及工厂', type: 'string', width: 180, align: 'left' }, { field: 'range', title: '项目范围', type: 'short', width: 110, align: 'left' }, { field: 'itemize', title: '车系', type: 'int', width: 110, align: 'left' }, { field: 'model', title: '车型', type: 'string', width: 180, align: 'left' }, { field: 'proLevel', title: '项目等级', type: 'string', width: 110, require: true, align: 'left' }, { field: 'plan_starttime', title: '计划开始时间', type: 'string', width: 220, align: 'left' }, { field: 'plan_endtime', title: '计划结束时间', type: 'datetime', width: 150, align: 'left', sort: true }, { field: 'real_starttime', title: '实际开始时间', type: 'string', width: 110, align: 'left' }, { field: 'real_endtime', title: '实际结束时间', type: 'datetime', width: 150, align: 'left', sort: true }, { field: 'lifecycle', title: '生命周期状态', type: 'string', width: 110, align: 'left' }, { field: 'modifiedtime', title: '修改时间', type: 'datetime', width: 150, align: 'left', sort: true } ]) const detail = ref({ cnName: '#detailCnName', table: '#detailTable', columns: [], sortName: '', key: '' }) return { table, extend, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail } } }) </script> 我点击编辑保存产品大类/***************************************************************************************** ** Author:jxx 2022 ** QQ:283591387 **完整文档见:http://v2.volcore.xyz/document/api 【代码生成页面ViewGrid】 **常用示例见:http://v2.volcore.xyz/document/vueDev **后台操作见:http://v2.volcore.xyz/document/netCoreDev *****************************************************************************************/ //此js文件是用来自定义扩展业务代码,可以扩展一些自定义页面或者重新配置生成的代码 let extension = { components: { //查询界面扩展组件 gridHeader: '', gridBody: '', gridFooter: '', //新建、编辑弹出框扩展组件 modelHeader: '', modelBody: '', modelRight: '', modelFooter: '' }, tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写) buttons: { view: [], box: [], detail: [] }, //扩展的按钮 methods: { //下面这些方法可以保留也可以删除 onInit() { //框架初始化配置前, //示例:在按钮的最前面添加一个按钮 // this.buttons.unshift({ //也可以用push或者splice方法来修改buttons数组 // name: '按钮', //按钮名称 // icon: 'el-icon-document', //按钮图标vue2版本见iview文档icon,vue3版本见element ui文档icon(注意不是element puls文档) // type: 'primary', //按钮样式vue2版本见iview文档button,vue3版本见element ui文档button // onClick: function () { // this.$Message.success('点击了按钮'); // } // }); //示例:设置修改新建、编辑弹出框字段标签的长度 // this.boxOptions.labelWidth = 150; this.table.sortName = 'id' this.table.sortOrders = ['asc'] }, onInited() { //框架初始化配置后 //如果要配置明细表,在此方法操作 //this.detailOptions.columns.forEach(column=>{ }); }, searchBefore(param) { //界面查询前,可以给param.wheres添加查询参数 //返回false,则不会执行查询 // 添加排序参数 param.sort = 'id' param.order = 'asc' return true }, searchAfter(result) { //查询后,result返回的查询数据,可以在显示到表格前处理表格的值 return true }, addBefore(formData) { //新建保存前formData为对象,包括明细表,可以给给表单设置值,自己输出看formData的值 return true }, updateBefore(formData) { //编辑保存前formData为对象,包括明细表、删除行的Id console.log(formData) debugger return true }, rowClick({ row, column, event }) { //查询界面点击行事件 // this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行; }, modelOpenAfter(row) { //点击编辑、新建按钮弹出框后,可以在此处写逻辑,如,从后台获取数据 //(1)判断是编辑还是新建操作: this.currentAction=='Add'; //(2)给弹出框设置默认值 //(3)this.editFormFields.字段='xxx'; //如果需要给下拉框设置默认值,请遍历this.editFormOptions找到字段配置对应data属性的key值 //看不懂就把输出看:console.log(this.editFormOptions) } } } export default extension 这里触发保存update时没保存进去,而且其他字段也没跟着保存回去
最新发布
11-27
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值