Vue进阶之Vue无代码可视化项目（七）

已于 2025-02-25 22:38:45 修改
阅读量1k 收藏 19
点赞数 7
分类专栏： Vue无代码可视化项目 文章标签： vue.js javascript 前端
于 2024-07-18 15:44:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34306228/article/details/140512647
版权

Vue无代码可视化项目

右侧栏配置——配置面板

右侧栏配置主要是表单相关的内容，表单处理是开发中用的特别多的场景；今天从架构师的视角来看下这个表单怎么设计，动态表单、复杂表单、表单联动。

  • src
    • components
      • RightPanel.vue

components/RightPanel.vue

先将左侧栏复制一份粘到右侧栏上

<script setup lang="ts">
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue-element-admin源码解析之设置模块
u012335618的专栏
12-03 1180
基础配置文件 module.exports = { title: 'Vue Element Admin', /** * @type {boolean} true | false * @description Whether show the settings right-panel */ showSettings: true, /** * @type {...
vue-element-admin 生成顶部导航栏解决方案
顾老师叫我写博客的博客
12-10 2万+
背景 项目需要基于 vue-element-admin 开发，vue-element-admin主要定位是中后台管理系统，而项目又偏向前中台，因此想使用顶部导航栏的方式。原本以为很简单，不就是将 导航栏组件 mode设为 horizontal 就可以了吗，naive~ 排查了一下代码（和官文），发现 ： 这里同时也改造了 element-ui 默认侧边栏不少的样式，所有的 css 都可以在 @/...
Vue父子组件间调用
码来-陈平安的博客
01-03 144
一、父组件传值给子组件 父组件 在父组件中需要引入子组件，并通过 ‘ :+属性名方式 ’进行数据绑定 <right-panel ref="right" :list="dataList"></right-panel> 子组件 在子组件中使用prop属性进行接收数据，定义props属性就无需在data中定义 export default { data () { return { dataList: [] } }, methods: {
【ruoyi源码学习】5.完整的主页面有哪些组件
tiandi0123的博客
08-03 1234
在vue框架中可以进行组件式开发，尽量将同样的功能封装到一个组件中，以便减少代码量和增加代码可读性。本期我们便来看看ruoyi前端主页面中的各个组件。
vue后台管理系统学习(5)--主页面改造
游响云停专栏
09-21 1687
今天我们看看主页面布局以及主页面有哪几部分组成，首先主页面的路径在src/layout/index 主页面主要有侧边栏，面包屑，navbar ,选项卡，内容区域这几部分组成 代码如下 <template> <div :class="classObj" class="app-wrapper"> <div v-if="device==='m...
Vue进阶之Vue无代码可视化项目（一）
qq_34306228的博客
05-31 962
eslint跑起来的过程中需要指定一个env环境，这个千万不要忘记了。除了已有的基础架子之外，还要在这基础上再加一些规范化的产物。.vue,.js相关的内容用eslint做规范检查。git commit -m “规范化相关内容”全程参与了 - 把控/管控App的生命周期。创建stylelint.config.cjs。创建custom-words.txt。stylelint检查样式相关的。像这样就是暂时没大问题了。设置npm官方下载源。
Vue进阶之Vue无代码可视化项目（九）
最新发布
qq_34306228的博客
08-02 1237
登录注册真这么简单吗？针对普通的table，数据量特别大的时候，要怎么做呢？ Canvas是没有事件机制的，因此这个事件(鼠标点击事件等)需要我们自己代理去做，把这个事件计算，拿到位置等后处理 选中单元格 现在smooth-dnd属于是年久失修的一个状态了，因为目前已经不支持vue3的这部分内容了，所以我们使用的时候，需要先在他基础上拓展一下 将拖拽的逻辑提取出来DndContainer.js文件，做封装 DndContainer.js
Vue进阶之Vue无代码可视化项目（六）
qq_34306228的博客
07-17 1017
接下来要做的是，中间区域Block相关的内容，block相关的内容最重要的就是，数据协议设计和整体渲染器的逻辑渲染器概念：简单点说就是，封装他的组件。比如做了一个图表，可以说封装了一个图表组件，如果做了一个表单校验，可以说做了一个表单校验组件，或者写了一些业务组件，但是这些点要是上升一点，就是，表单渲染 – 表单渲染器，表单渲染组件，表单规则约定 – 表单规则校验器；可以美化这些词语，提高简历数据协议：左边物料区有很多的物料列表，将左边的物料拖到中间编排区进行编排，拖拽之后，这些内容区域就能组装成一个页面，
Vue进阶之Vue无代码可视化项目（二）
qq_34306228的博客
06-01 970
创建ActionsView、DataSourceView、LayoutView三个文件。删除示例文件AboutView、AboutAboutView、HomeView三个文件。
Vue进阶之Vue无代码可视化项目（八）
qq_34306228的博客
07-29 604
将components/RightPanel.vue 移到components/RightPanel目录下去 这里，只有通过computed、watch、将他的api这些语法全部连接起来，它才会有一个响应式的表现，如果不这样做，只会在初始化进来的时候操作一次，后续的话，是不会再走的，这也是跟React很大的一个区别。之前探讨过更细颗粒度的更新，更细粒度的管理，在React中是通过信号的方式来进行状态的维护的。 TextSetting.vue ImageSetting.vue ChartSetting.v
Vue组件间的参数传递
weixin_45205937的博客
10-15 473
Vue组件间的参数传递： 1、父子组件传值 父组件传给子组件：子组件通过props方法接收数据； <div id="app"> <!--父组件,可以在引用子组件的时候,通过 属性绑定(v-bind: )的形式,把 需要传递给子组件的数据,以属性绑定的形式,传递到 子组件内部,供子组件使用--> <com1 :parentmsg="msg"&gt...
【Ant Design Vue 】之Menu菜单
张营的技术博客
03-11 1万+
文章目录常用属性常用事件递归嵌套多级菜单效果 版本ant-design-vue: "^1.7.4", 常用属性 属性 说明 默认值 mode 菜单类型，现在支持垂直、水平、和内嵌模式三种 vertical inlineCollapsed inline 时菜单是否收起状态 theme 主题颜色(light/dark) light openKeys(.sync) 当前展开的 SubMenu 菜单项 key 数组 defaultOpenKeys 初始展开的 SubMenu
vue拖拉拽生成表单
xy19950125的博客
08-23 9464
拖拉拽快速生成页面
一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头
binggoling
01-07 1527
目录一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头一、效果二、配置实现 一步步创建vue-element-admin框架实现008-动态设置Logo和固定navbar头 一、效果 动态设置展示sidebar系统Logo、固定navbar头 界面设置 二、配置实现 1）新增文件：src\components\RightPanel\index.vue 直接拷贝my-vue-element-admin的src\components\RightPanel\ind
vue-element-admin实现顶部菜单栏，并可互相切换
qq_36365860的博客
09-03 1万+
先上传效果图 一、配置顶部菜单 1.复制一份src/layout/componets/Sidebar所有文件至同级目录，改名为Headbar，并在src/layout/components/index.js中声明Headbar 声明Headbar 2.修改Headbar/index.vue文件内容，主要删除了logo和更改了el-menu的mode属性为horizontal,并将name更改为Headbar； <template> <el-scrollbar .
rightPanel配置后，点击没有效果的原因
winteriscomming的博客
07-12 2013
rightPanel是和searchPanel配合使用的，，如果在view层没有配置searchPanel，rightPanel的itemId是无法获取到的因此就会无法使用。加上searchPanel即可解决。searchPanel : { hidden : true, xtype : 'panel', layout : { type : 'column', columns...
vue 表单封装（利用iview自带组件）
zhxh0376的专栏
06-14 4068
实战代码功能如下 1.inputNumber 数字框 千分位和小数点 处理。（详细功能会另起文章） 2.AutoComplete 和select 框的联动处理 3. 弹框功能和弹框表单 4.动态添加表单字段 5.实战富文本编辑器另起文档说明。 封装目的和解决痛点， 表单字段 10几个20个时候，需要人为的不断拷贝和添加 相同的代码 特别是iview 冗余代码会非常多，ht...
vue vue-element-ui组件 layout布局系列学习(一)
热门推荐
然而老干妈早就看穿了一切
04-04 17万+
本文仅供参考： 首先你要掌握的基础知识: row 行概念 <el-row></el-row> col列概念 <el-col></el-col> col组件的:span属性的布局调整,一共分为24栏: 代码示例: <el-row> <el-col :span="24"><div class="g...
Vue2实现的大屏数据可视化项目源码及教学指南
本资源是一套完整的基于Vue2框架开发的响应式大屏数据可视化项目源代码。该项目支持大屏幕展示，并使用响应式设计以适配不同尺寸的显示设备。源码中包含了所有必要的文件，适用于教育学习、个人或企业项目开发，以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值