封装组件的基本方法就是通过props和emit进行父子组件的传值和通信。利用插槽、组件等增加组件的可扩展性和复用性。通用表单组件功能：收集数据、校验数据并提交需求分析实现KForm
指定数据、校验规则KFormItem
执行校验显示错误信息KInput
维护数据基本表单封装思路：整个Form表单数据绑定在el-form上：:model=“form”，form就是表单的数据对象，使
转载
2024-04-17 16:08:54
175阅读
封装element-ui表格
项目安装安装插件在使用element-ui的项目中，可以通过以下命令进行安装npm install vue-elementui-table -S复制代码在项目中使用在main.js中添加以下代码import ZjTable from 'vue-elementui-table’Vue.use(ZjTable)然后即可像下文中的使用方式进行使用表格配置为了满足团队快速开发
转载
2024-05-10 08:05:14
219阅读
1.渲染树形控件树形控件的结构是一层层嵌套的，官网上定义好的结构中属性名我们无法更改，实际开发中后台返回的字段名与属性名也会不一致，这里我们用到了“递归”的方法将结构中的属性赋予实际开发中的值。（1）树形结构如下：<el-tree
v-model="form.treeData"
:data="treeData"
show-checkbox
node-key="id"
ref="tr
转载
2024-02-25 19:43:31
399阅读
十二、封装成ui组件库我们在前面已经将组件全部封装完毕了，现在我们要将组件打包成组件库，上传到github上。由于是模仿element-ui进行的组件封装，所以在发布时也是用element-ui的打包结构。12.1目录调整我们新建一个vue项目，并且在根目录创建两个文件夹就packages和examples。packages：用于存放所有的组件examples：用于进行测试，把src改为examp
转载
2024-06-19 21:55:33
228阅读
穿梭框组件是前端框架中常见的一种数据选择方式，可以动态可视化的展示数据的归属。
示例 准备Axure 8（或Axure 9）软件已安装。掌握基本的软件使用。熟悉中继器。本教程知识点选项组：选中效果互斥。中继器函数。详细教程
本教程源文件提供了通过全局变量传参和局部变量传参的两种方式实现。
本文以局部变量传参进行实现（相对简单易懂，且方便后期成为
组件封装的步骤1、确定组件结构
2、新增组件页面
3、修改新增的组件页面和HOME页面
4、HOME文件引入模块
5、测试【注】完成之前没做完的准备工作
因为以前写文件名都是采用驼峰法写，采用的是小写开头，但据观察VUE文件普遍采用的是大写开头，所以要把所有vue文件的文件名都改成大写开头，并在router/index.js中修改组件结构【注】你也可以不将Home文件另存为，个人习惯问题新增文件并
转载
2024-04-30 18:15:40
67阅读
1. 文件目录结构在views目录中放页面基础结构的组件在components里放页面中各个功能模块的组件2. 使用组件（1）在页面中单独引用<template>
<Nav></Nav>
</template>
<script>
import nav from '@/components/Nav.vue'
export defaul
转载
2024-04-07 08:51:11
831阅读
分组类控件面板控件（Panel）分组框控件（GroupBox）选项卡控件（TabControl）等控件Panel 控件是由System.Windows.Forms.Panel类提供的，主要作用就是将其他控件组合在一起放到一个面板上，使这些控件更容易管理，当Panel控件面板上要显示过多的控件时，可设置AutoScroll属性为true。Panel控件面板在默认情况下不显示边框，如把BorderSt
写在前面数据量100条左右Tree层级4-5级节点操作卡顿时间4~5s，并伴随初始化样式失真 卡顿只存在表格内嵌树结构情况下，单独Tree组件是不存在卡顿的。卡顿原因仍在定位源码中，之所以会去排查源码是因为我用同样的数据测试element、ant-design框架均不会出现卡顿，不仅仅是无卡顿
转载
2024-06-22 14:52:06
384阅读
菜单表 menu_id, parent_id,order_num查询给前端的 select menu_id,parent_id,order_num from menu order by parent_id,order_menu前端处理 参数说明 ： data ：获取的数组 id： 比如 menu_id 后面的可以不传。示例数组（后台查出）：[
{menu_id: 1, parent_id:
说明针对Element UI table进行了简单封装，支持复杂表头、分页、跨行等。主要封装内容如下：pagination：是否分页，默认truecolumns：列配置(支持复杂表头)data-url：获取数据的url，GET方法page-size：每页显示条数，默认10current-page：当前页码optionColumn：操作栏列show-loading：是否展示loading，默认tru
转载
2024-09-10 21:16:15
396阅读
背景照惯例，先交待下背景，从真实需求出发，讲述设计思路和实现方式。 软件系统中，会有一些成组的常量值，来描述业务实体的属性，如性别、证件类型、审批状态等。我们通常称之为数据字典，作为系统后台管理的一个独立功能，来维护字典类型以及对应的字典值。后端功能和实现都比较简单，没什么好说的，今天重点要说的是前端的封装。设计与实现对于数据字典，前端展现往往有三种常用的形式，下拉列表、单选按钮组和复选框组，其中
转载
2024-09-06 11:03:18
100阅读
开发中遇到了个上传合同的需求，使用的是 elementui 的上传组件，项目中使用比较多，进行了
封装，开发完成后总结一下，供大家和自己使用时查看。上代码！1. 模板代码<template>
<div class="uploadFile" style="margin-top:15px;">
<!-- 上传组件 -->
<e
转载
2024-03-21 09:50:15
150阅读
需求我的项目里，有个页面是两个选项卡，两个页签里稍有不同，用的组件，然后各个选项卡都有二级详情页，需求就是从二级详情页返回的时候，要返回上次选中的选项卡页签。思路在elementUI中，有一个默认选中的api它就是value / v-model，点击可以查看官网api方案我是方案就是通过缓存来记录，在离开本页的时候，存到cookie里，进入本页，获取cookie，我感觉还挺简单的，也很方便。<
转载
2024-10-18 10:34:46
395阅读
前言这个系列主要是分享自己在工作中常用到的业务组件，以及如何对这些组件进行有效的封装和封装的思路。注：都是基于element ui进行二次封装。封装组件的基本方法就是通过props和emit进行父子组件的传值和通信。利用插槽、组件等增加组件的可扩展性和复用性。Form组件介绍Form表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。使用表单，可以收集、验证和提交数据。表单常用的地
转载
2024-04-29 14:46:17
285阅读
(持续更新)点击某个盒子之外的部分触发函数假设此盒子的class为：item-operationhideOperation(event) {
// 隐藏加减号图标
var op = document.getElementsByClassName('item-operation');
if (op) {
for (let i = 0; i <
转载
2024-10-30 06:51:53
109阅读
1、 2、 3、 4、 程序员兼职 可以加我微信进群，有资料送，也可以讨论问题
原创
2021-12-27 15:02:11
454阅读
二次封装el-select组件，以便使用。包含两个部分：创建、引用。说明 ：1. 下拉选项框一般是请求数据字典的值以供选择，假设数据字典的接口为’/getDictionary’，请求参数为code，数据字典中的展示值字段为’label’，选中所传值字段为’value’。2. 也有特定接口请求下拉选择的，需要指定特定的请求接口url、参数和展示的value和label值。3. 各个属性灵活运用，也可
转载
2024-03-13 10:24:11
36阅读
# Vue + ElementUI+ el-autocomplete 组件的防抖方案的懒加载 在项目开发中，经常会使用到下拉选择框，为了更快捷所以有了autocomplete的出现，autocomplete 是一个可带输入建议的输入框组件，该组件在数据量大的情况下能通过输入快速的查找到对应的选项。 通过Element-UI的官网文档的示例可知，其通过输入数据从而自动查找且显示对应的数据。 
转载
2024-10-31 18:44:56
314阅读
首先贴上效果图，如下：（下面新增了个用分组把每一组分开的，大概会好看点） 这是简单的把同组选项归为一类的解决方案，难的我是真不大会做，因为不会控制input的内容，如果大佬有更好的解决方案可以评论区留言~1、先贴一下代码和实例数据<el-select clearable
v-model="form.testGroup"
ref="mySelect"
style="wid
