![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
).(
这个作者很懒,什么都没留下…
展开
-
禁启用,只控制本行,不影响其他行
element 只控制本行,不影响其他行(本次笔记包括:el-table和 el-checkbox)需求:在操作本行的禁启用按钮,不影响其它行的。el-tableel-table的禁启用,代码如下:forbidBtn(row,currentIndex){ //currentIndex为本行的index,控制不同行的 this.$set(this.UserManagementTableData[currentIndex],'isEdit',true); this.$set(th原创 2021-04-01 15:30:13 · 218 阅读 · 0 评论 -
vue表单验证-正则表达式
rules: { creditCode: [{ required: true, message: '请输入企业信用代码', trigger: 'blur' }, { min: 1, max: 50,message: '长度在 1 到 100 个字符', trigger: 'blur' }, { pattern:/^[A-Za-z0-9]+$/, message: '只能输入数字、字母', trigger: 'blur'}], log转载 2021-03-25 11:10:31 · 1728 阅读 · 0 评论 -
面包屑导航实现动态路由
el-breadcrumb 面包屑导航实现动态路由1、实现效果如图所示:2、路由部分;添加meta标签:代码:{ path: '/userManagement', component: UserManagement, meta:{ title:'用户管理' } }, { path: '/departMentManagement', component: DepartMentManagement, meta:{原创 2021-02-23 15:57:03 · 986 阅读 · 1 评论 -
el-table点击禁用按钮,只禁用本行的编辑按钮,不影响其他行
el-table点击禁用按钮,只禁用本行的编辑按钮,不影响其他行1、效果如图所示2、html部分:这里控制禁用,启用,以及编辑按钮是否可用的字段都要写在list里面//这里控制禁用,启用,以及编辑按钮是否可用都要写在list里面 <el-table-column prop="operate" label="操作" align="center"> <template slot-scope="scope"> <el-button原创 2021-02-23 11:30:31 · 4391 阅读 · 0 评论 -
实现el-tree的叶子节点的修改功能
实现el-tree的叶子节点的修改功能1.要实现的功能如图所示:点击编辑按钮,可修改叶子结点的名称,2.首先是html部分: <el-tree :data="departmentData" node-key="id" default-expand-all :expand-on-click-node="false" > <span class="custom-tree转载 2021-02-21 15:39:49 · 3539 阅读 · 4 评论 -
侧边栏菜单部分的渲染问题
侧边栏菜单部分的渲染问题html部分 <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :default-active="activePath" router > <!-- 侧边栏菜单部分 --> <el-原创 2021-02-20 14:57:06 · 284 阅读 · 0 评论 -
关于el-table
el-tablede的表头样式1.背景颜色:header-cell-style="{background:'#F7F8FA'}"2.居中对齐:header-cell-style="{'text-align':'center','background-color':'#f8f8f8','color':'#555'}" :cell-style="{'text-align':'center'}"原创 2021-02-20 14:53:05 · 75 阅读 · 0 评论 -
.menu_item添加点击效果-右箭头
.menu_item添加点击效果-右箭头最终结果.menu_item.is-active { background-color: rgba(61, 126, 255, 0.1); span { color: #3D7EFF; }}.menu_item.is-active::after{ display: inline-block; content: " "; height: 7px; width: 7px;原创 2021-01-29 11:18:12 · 421 阅读 · 0 评论 -
根据复选框的内容判断另一个复选框的显示与隐藏
根据复选框的内容判断另一个复选框的显示与隐藏<el-select v-model="value" placeholder="请选择" size="mini" @change="isShowDateChange"> <el-option v-for="item in selectOptions" :key="item.value"原创 2021-01-25 18:09:56 · 530 阅读 · 0 评论 -
qs的使用笔记
qs的使用笔记import qs from 'qs';//引入confirmModify() {//具体使用案例 this.$refs.modifyRuleFormRef.validate(async (valid) => { // eslint-disable-line no-unused-vars if (valid) { let _this = this; const { data: res } = awa原创 2021-01-25 16:23:06 · 177 阅读 · 0 评论 -
在项目中引入阿里图标库iconfont
在项目中引入阿里图标库iconfont1、首先是阿里图标库的地址:https://www.iconfont.cn/2、进入后选择要引入的图标添加进购物车,点击购物车,添加至要引入的项目;3、找到添加的项目,点击查看查看在线连接。生成在线的链接;4、将生成的链接复制到浏览器的地址栏,打开生成代码;5、复制代码在项目中即可。...原创 2021-01-22 15:49:33 · 863 阅读 · 1 评论 -
el-select默认全选
el-select默认全选功能查了好多资料,也尝试了好多次,最后终于实现了想要的结果。先来看下最后的结果,下面是这次项目我遇到的难题:刚打开页面时,就默认全选。先讲一下我之前犯过的错误,上代码://html部分<template><el-select class="breakType" v-model="breakValueType" multiple placeholder="请选择故障类型" size="small" value-ke原创 2021-01-11 14:49:08 · 3356 阅读 · 0 评论 -
vue导出以.xlsx为结尾的表格
vue导出以.xlsx为结尾的表格1.首先npm下载两个依赖(file-saver xlsx)npm install -S file-saver xlsx 2.在需要导出.xlsx的页面导入这两个依赖(file-saver xlsx):import FileSaver from "file-saver";import XLSX from "xlsx";3.js部分: exportExcel() { // 设置当前日期 let time = new Date();原创 2021-01-08 11:35:08 · 154 阅读 · 0 评论