<template> <section class="ces-table-page"> <!-- 表格操作按钮 --> <section class="ces-handle" v-if='isHandle'> <el-button v-for='item in tableHandles' :key='item.label' :size="size || item.size" :type=&qu…

文章已收录到 github,欢迎 Watch 和 Star. 简介 在了解 Element 源码架构 的基础上,接下来我们基于 element-ui 为团队打造自己的组件库. 主题配置 基础组件库在 UI 结构上差异很小,一般只是在主题色上会有较大差异,毕竟每个团队都有了 UI 风格.比如,我们团队的 UI 设计稿其实是基于 Ant Design 来出的,而组件库是基于 Element-UI 来开发,即使是这种情况,对组件本身的改动也很少.所以,基于开源库打造团队自己的组件库时,主题配置就很重要…

前言 今天,回老家了.第一件事就是回家把大屏安排上,写作的感觉太爽了,终于可以专心地写文章了.我们今天要做的项目是怎么样搭建一个无限级联层级表格组件,好了,多了不多说,赶快行动起来吧!项目一览 到底是啥样子来?我们来看下. 正如你所看到的那样,这个组件涉及添加.删除.编辑功能,并且可以无限级嵌套.那么怎样实现的?我们来看下.源码 直接给出源码,就是这么直接. <template> <div class="container"> <el-button typ…

由于前端项目使用的是Vue-cli3.0 + TypeScript的架构,所以该组件也是基于ts语法封装的,组件的完整代码如下: <template> <div id="myImport"> <el-button type="primary" plain @click="importDialogVisible = true">导入</el-button> <!-- 导入弹窗 --> &l…

大家在做后台管理系统的时候,写的最多的可能就是表格页面了,一般分三部分:搜索功能区.表格内容区和分页器区.一般这些功能都是使用第三方组件库实现,比如说element-ui,或者vuetify.这两个组件库都各有各的优点,但就table组件来说,我还是比较喜欢vuetify的实现,不用手写一个个column,只要传入headers的配置数组就行,甚至分页器都内置在了table组件里,用起来十分方便.有兴趣可以看看:vuetify data table. 上面是一个经典的用element-ui开发的…

引言 在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比较多,所以可以加以封装,搞一个兼容性和扩展性都契合项目本身的组件. 主要思路 我简单查阅了一番资料,参考了一下别人的封装方式,决定以Col和FormItem作为基本单元,进行表单的搭建,主要原因 可以将FormItem的信息和Col的信息以对象方式传入,这样我们可以更加专注于组件的包含的信息 减少C…

前段时间做的项目中需要用到highcharts绘制各种图表,其实绘制图表本身代码很简单,但是由于需求很多,有大量的图形需要绘制,所以就不得不复制粘贴大量重复(默认配置等等)的代码,所以,后来抽空自己基于highcharts封装了一个插件.组件暴露一个Hxt的全局对象,它有以下一些方法来绘制不同类的图形,从此以后,画图只需简简单单的几行配置就ok了!赶紧点进来看看实例吧! Hxt.line(elem, data, options); //渲染默认折线图 Hxt.spline(elem, data,…

前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发中也没有遇到过这样的需求,但我当时给他提供了一个思路. 时间过去了这么久,公司的各种需求也不停地往外冒,什么地图图表.表格行内编辑.动态新增表单等等,只有你做不到,没有产品想不到,贼鸡儿累.再加上很快又要过年了,大家工作的心态基本呈直线下滑趋势而玩忽职守.尸位素餐以致饱食终日.只是话虽如此,但越是到年底,需求…

前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是Vue CLI 3 + element-ui + 多个二次封装的组件.最终想要的是 element-ui 这种感觉的,很多组件可以在不同项目中复用. 安装依赖 首先用Vue CLI 3来初始化项目 yarn global add @vue/cli vue create qiyun-el-ui vue…

封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.Vue + Element-ui实现后台管理系统(1) --- 总述 2.Vue + Element-ui实现后台管理系统(2) --- 项目搭建 + ⾸⻚布局实现 3.Vue + Element-ui实现后台管理系统(3) --- 面包屑 + Tag标签切换功能 4.Vue + Eleme…