vue + element-ui实例
文章平均质量分 76
主要写了一些平时项目开发中,vue结合element-ui组件的实例。
徐小硕
自律即自由
展开
-
Vue3+ElementPlus实例_select选择器(不连续搜索)
这种不连续的匹配方式,就实现不了,用户体验较差,所以就开发了一个不连续搜索的select选择器,并带有输入内容的高亮提示。中,在搜索时都是输入连续的搜索内容,比如“app-store”选项,你要输入“这里我们借用了一下第三方的api库——1.如何不连续匹配选项。”,才能匹配这个选择,要是想输入“下面是我完成后的演示,请看。原创 2024-01-16 16:05:51 · 729 阅读 · 0 评论 -
Vue+Element-ui实例_在form中动态校验tag标签
动态form中添加动态tag标签,并校验tag原创 2023-11-30 16:00:57 · 985 阅读 · 0 评论 -
Vue+Element-ui实例_el-tooltip 占比横条(可超过100%)
横向占比显示条,是可以超过100%原创 2022-09-09 10:37:46 · 1553 阅读 · 1 评论 -
Vue+Element-ui实例_el-table可选列(字段)导出Excel
不知道小伙伴们有没有遇到过table表格导出Excel时,领导说“我不想全部导出,能不能选择我想导出的列(字段)”,心里嘀咕“你不能用Excel去操作嘛”,好叭,还是我来吧,下面这篇文章就简单的介绍了如何对el-table表格进行选择列(字段)的导出,进行了组件的封装处理,希望大家喜欢,如有纰漏望指正,谢谢主要需要解决的问题:(1)怎么样对展示的table表格进行选择列(字段)的处理(2)v-if和v-show的不同处理(3)如何进行组件封装效果图如下:下面是代码部分:原创 2021-05-07 10:25:30 · 3991 阅读 · 2 评论 -
Vue+Element-ui实例_el-checkbox二级复选框
想必大家在很多时候都会碰到多级复选框的情况吧,下面这篇文章介绍了vue结合el-checkbox组件,编写的一个二级复选框案例(多级也可以根据此案例仿写)。主要难点:(1)多次使用v-for循环,把需要展示的复选框按照,一级——二级的样式展现出来。(2)当一级复选框选中时,二级复选框全选,当二级复选框非全选时,一级复选项为不选中状态,当二级复选框为全选时,一级复选框为选中状态。(3)全部全选,和全部取消选中。(4)记录选中的二级复选框id,方便后续操作。效果图如下:下面是原创 2021-01-06 15:09:21 · 4614 阅读 · 4 评论 -
Vue+Element-ui实例_图书列表
下面做了一个图书列表,对图书进行新增和删除,并计算已存在图书的价格总和对新学习vue的同学可以作为小练习进行训练。运行截图如下:代码中使用到了Element-ui、Bootstrap.js前端框架Element-ui-CSS链接:element-ui-cssElement-ui-js链接:element-ui-jsBootstrap.js链接:Bootstrap.js下面是代码部分:<!DOCTYPE html><html> <he原创 2020-05-12 11:01:44 · 1208 阅读 · 0 评论 -
Vue+Element-ui实例_使用flexslider插件设计横向时间线
下面是做了一个类似时间线(history事件线)的页面,主要是记录一下log,或者history的操作记录。主要难点:(1)一般的插件时间线例如(elementUI中的el-timeline)就是纵向的时间线,如果数据过多的话,就会形成很长一段的下拉样式。(2)最主要的就是CSS样式调节,(这个真的是头发)(3)个人审美的不同,反正我做了好几个版本样式,每个人都有自己不同的喜好。效果图如下:...原创 2021-01-04 09:32:48 · 9747 阅读 · 5 评论 -
Vue+Element-ui实例_可编辑表格和分页(2)改进版
本篇文章是对上一篇《Vue.js_实例_可编辑表格和分页》的改进版改进处:(1)对某一行的编辑时,设置背景颜色提醒,原创 2020-11-13 16:42:42 · 370 阅读 · 0 评论 -
Vue+Element-ui实例_可编辑表格和分页
下面是一个可以实现编辑的表格,并且该表格嵌入在form表单内,可以对已修改的内容进行保存提交;而且实现了对表格数据进行关键字搜索和分类筛选的功能,实现了前端分页的效果。主要难点:(1)当el-table列数据过多时,我们可以通过设置 type="expand" 和Scoped slot可以开启展开行功能,然后在每一行设置一个可编辑按钮,对展开的数据中的某条数据进行再编辑。(2)当你设置可编辑按钮时,还要对此行展开状态进行判断,判断该行是否为展开,若已展开,则编辑,若未展开,则展开进行编辑。..原创 2020-10-15 11:19:19 · 1832 阅读 · 5 评论 -
Vue+Element-ui实例_评测表单
下面做了一个公司内部的评测表单页面,用于给公司内部人员打分,和写一些意见或建议。其中难点:(1)如何在固有elementUI框架中的table组件中,插入自己需要的组件,比如input。让table组件不仅仅是展示数据,还能写入数据。(2)如何利用v-for循环,首先把后台传来的,被评测人和对应的问题,写入table组件中。(3)如何再次利用v-for循环,把和问题对应的input组件循环到table组件中,比如分数使用el-input-number、意见或建议使用el-input。效果原创 2020-08-12 09:52:16 · 2004 阅读 · 0 评论