当前位置: 首页 > news >正文

<avue-crud/>,二级表头,children下字典项的dicUrl失效问题

目录

1.提出问题:

1.1 代码:

1.2 效果图:会发现处在children下的dicUrl失效了

2. 解决思路

 3. 解决代码(你要的都在这,看这里)


1.提出问题:

        在使用<avue-crud/>组件实现二级表头时,发现在children下配置字典项:只有dicData可以生效、但是dicUrl不生效,

1.1 代码:

{"label": "基站属性明细信息","children": [{"type": "input","label": "覆盖区域","prop": "s7",dicUrl: "/admin/dict/type/CoverAreas",},{"type": "input","label": "基站属性","prop": "s8",dicUrl: "/admin/dict/type/StationAttributes",},{"type": "input","label": "站址码","prop": "s9","width": 80}]
},

1.2 效果图:会发现处在children下的dicUrl失效了

2. 解决思路

        既然处在children下的dicUlr会失效,那么我们可以单独把该属性拎出来(那问题来了:怎么拎),这里使用插槽来实现。

        注意: 这个使用到avue自带的弹出框实现新增,需要使用的是 “formslot” 表单插槽。

 3. 解决代码(你要的都在这,看这里)

const.js(tableOption):

        在需要的属性上加上:formslot: true

    {"label": "基站属性明细信息","children": [{"type": "input","label": "覆盖区域","prop": "s7",formslot: true,},{"type": "input","label": "基站属性","prop": "s8",formslot: true,},{"type": "input","label": "站址码","prop": "s9","width": 80}]},

index.vue:  

        注意插槽要在属性的的基础上加上xxxForm

<template><avue-crud><template slot="s7Form" slot-scope="{row,index}"><el-selectstyle="width: 100%" v-model="row.s7"clearable filterableplaceholder="请输入"><el-optionv-for="(item,index) in CoverageAreaList":key="index":label="item.label":value="item.value"></el-option></el-select></template><template slot="s8Form" slot-scope="{row,index}"><el-selectstyle="width: 100%" v-model="row.s8"clearable filterableplaceholder="请输入"><el-optionv-for="(item,index) in StationAttributes":key="index":label="item.label":value="item.value"></el-option></el-select></template></avue-crud>
</template>
<script>export default {create(){getDICList('CoverageArea').then(res => {this.CoverageAreaList = res.data})getDICList('StationAttributes').then(res => {this.StationAttributes = res.data})getDICList('LargeCategory').then(res => {this.LargeCategory = res.data})}}
</script>

api.js 

        后台需要将字典项查出来,大家应该都知道,后台代码就不提供了,祝大家早日解决bug!!!

import request from "@/utils/request";export function getDICList(type) {return request({url: '/admin/dict/type/' + type,method: 'get'})
}

如果能帮到你,麻烦一键三连,您的点赞是我更新的动力!!!

http://www.lryc.cn/news/248604.html

相关文章:

  • FastApi接收不到Apifox发送的from-data字符串_解决方法
  • Python高级数据结构——堆(Heap)
  • linux 讨论题合集(个人复习)
  • 浅析SD-WAN技术如何加强企业网络安全
  • 测试相关-面试高频
  • 基于Java web的多功能游戏大厅系统的开发与实现
  • 【MySQL工具】my2sql-快速解析binlog
  • vueRouter常用属性
  • Qt5.15.2的镜像网址
  • Python隐藏特性:字符串驻留、常量折叠
  • 2-Python与设计模式--工厂类相关模式
  • PGP 遇上比特币
  • 项目demo —— GPT 聊天机器人
  • Airtest进阶使用篇!提高脚本稳定性 + 批量运行脚本!
  • 数据库系统概述之数据库优化
  • 【error:Custom elements in iteration require ‘v-bind:key‘ directives】元素绑定:key
  • TA-Lib学习研究笔记(二)——Overlap Studies下
  • 三.排序与分页
  • 第一个php扩展开发的demo
  • A stop job is running for Session c1 of user root (25s 1min 30s)问题
  • C语言进阶之笔试题详解(2)
  • 【开源】基于Vue和SpringBoot的独居老人物资配送系统
  • Linux常用命令----cp 命令
  • 前端:HTML鼠标样式及其对应的CSS属性值
  • Linux 命令chgrp chown chmod
  • 网络篇---第七篇
  • Webshell混淆免杀的一些思路
  • MacBook macOs安装RabbitMQ【超详细图解】
  • 基于格攻击的密钥恢复方法
  • Redis中的缓存穿透、雪崩、击穿(详细)