elementUI
weixin_46852620
这个作者很懒,什么都没留下…
展开
-
table合并单元格
<template> <div id="work"> <el-table :data="tableData" class="table" height="250"> <el-table-column prop="date1" label="日期一" width="50"> </el-table-column> <el-table-column prop="date2" l原创 2021-03-08 23:32:46 · 138 阅读 · 0 评论 -
form 表单中number 类型的字段校验时,不能准备的进行校验
解决办法:更新element UI 版本到v2.4以上,并且加上number 类型rules={ phone: [ { required: true, message: '年龄不能为空' }, { type: 'number', message: '年龄必须为数字值' }, ] }简单的校验,如必填、邮箱、日期、字段长度、数字。数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。原创 2021-02-08 21:22:20 · 508 阅读 · 0 评论 -
form做表单验证时,填写了正确的数值但是依旧一直提示为空。
定义验证规则时,rule和model绑定的属性值必须是一样的原创 2021-02-08 20:45:07 · 2691 阅读 · 0 评论 -
timeline时间线
<!-- timestamp:时间戳 --><el-timeline > <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp"> {{activity.content}} </el-timeline-item> </el-timelin原创 2021-02-06 22:15:29 · 304 阅读 · 0 评论 -
富文本编辑器
npm install vue-quill-editor –savemain.js// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// require styles 导入富文本编辑器对应的样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'使用 <!-- 富文原创 2021-02-06 20:10:22 · 37 阅读 · 0 评论 -
upload上传图片
<!-- action 表示图片要上传到的后台API地址 --> <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj" :on-success="handleSuccess"> <el-button size...原创 2021-02-06 17:24:07 · 1449 阅读 · 0 评论 -
steps步骤条
<!-- 步骤条区域 --> <!--activeIndex: 表明步骤的 index --> <el-steps :space="200" :active="activeIndex" finish-status="success" align-center> <el-step title="基本信息"></el-step> <el-step title="商品参数"></el.原创 2021-02-05 15:51:54 · 639 阅读 · 0 评论 -
tabs标签页
<!-- activeName:选择的标签name值 --><template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane> <el-tab-pane label="配置管理" name="second">配置管理内容</e原创 2021-02-05 12:57:09 · 78 阅读 · 0 评论 -
alert警告
<el-alert title="注意:只允许为第三级分类设置相关参数!" type="warning" :closable="false" show-icon > </el-alert>原创 2021-02-05 12:53:28 · 142 阅读 · 0 评论 -
tag标签
<el-tag :key="ietm" v-for="itemin dynamicTags" closable :disable-transitions="false" > {{tag}}</el-tag><el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.原创 2021-02-05 12:52:17 · 54 阅读 · 0 评论 -
cascader级联选择器
<!-- options 用来指定数据源 --> <!-- props 用来指定配置对象 --> <!-- v-model选中项绑定值 --> <el-cascader :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" ...原创 2021-02-04 18:08:54 · 134 阅读 · 1 评论 -
Cascader坑一
当数据过多时,数据显示不全解决方案: 全局样式里加.el-cascader-menu { height: 300px;}原创 2021-02-04 16:33:51 · 88 阅读 · 0 评论 -
vue-table-with-tree-grid
npm i vue-table-with-tree-grid -Simport treeTable from "vue-table-with-tree-grid"Vue.component("tree-table", treeTable) <!-- 表格 --> <tree-table class="treeTable" :data="catelist" :columns="columns" :sel原创 2021-02-04 14:38:44 · 52 阅读 · 0 评论 -
el-form表单重置方法resetFields()的坑
需要完整 el-form及 el-form-item 组件中 且 配置 prop,不配置的执行此方法,该输入框值不会重置 <el-form label-width="80px" :model="addInfo" ref="addRef"> <el-form-item label="名称" prop="roleName"> <el-input v-model="addInfo.roleName原创 2021-02-02 15:19:10 · 875 阅读 · 0 评论 -
el-table内容居中
/deep/.el-table { td, th { text-align: center; } }原创 2021-02-02 13:24:59 · 1010 阅读 · 0 评论 -
navmenu导航栏坑二
element.ui 侧边栏设置只显示一个unique-opened 无效,原因是把循环放到el-menu上,应该把它放到el-submenu上原创 2021-02-01 08:33:52 · 133 阅读 · 0 评论 -
navmenu坑一
el-menu 默认会有一个 border-right,导致导航栏展开后子菜单宽度多出1px问题,将其设置为none原创 2021-01-31 15:57:13 · 115 阅读 · 0 评论 -
navmenu导航菜单
<template> <el-container class="home-container"> <div @click="toggleCollapse">|||</div> <!-- 侧边栏菜单区域 --> <el-menu background-color="#333744" text-color="#fff" active-t原创 2021-01-31 15:48:58 · 283 阅读 · 0 评论 -
MessageBox弹框
<!-- 导入 -->import { MessageBox } from 'element-ui';Vue.prototype.$confirm = MessageBox.confirm<script> // 根据Id删除对应的用户信息 async removeUserById(id) { // 弹框询问用户是否删除数据 const confirmResult = await this.$confirm( '此操作将永久删除原创 2021-01-31 14:32:09 · 595 阅读 · 0 评论 -
Message消息提示
<!-- 导入 -->import Vue from 'vue'import { Message } from 'element-ui';Vue.prototype.$message = Message<!-- 使用 -->this.$message.success('登录成功')原创 2021-01-31 14:22:16 · 182 阅读 · 0 评论 -
pagination分页
<template> <!-- 分页区域 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pa原创 2021-01-31 14:18:01 · 192 阅读 · 0 评论 -
table表单
<template> <!-- 用户列表区域 --> <el-table :data="userlist" border stripe> <el-table-column type="index"></el-table-column> <el-table-column label="姓名" prop="username"></el-table-column> .原创 2021-01-31 14:10:43 · 82 阅读 · 0 评论 -
form表单坑一:validate无法进入回调
ElementUI el-form组件使用自定义校验规则时,必须保证自定义校验规则的每个分支都调用了callback方法,否则会导致el-form组件的validate方法无法进入回调函数。const checkMaxScore = (rule, value, callback) => { if (value === null || value === undefined) { callback(new Error("最高得分不允许为空!")); }原创 2021-01-30 15:49:39 · 1232 阅读 · 0 评论 -
form表单
<template> <div class="login_container"> <!-- 登录表单区域 --> <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="20px" class="login_form"> <!-- 用户名 --> <el-form-item原创 2021-01-30 15:40:38 · 71 阅读 · 0 评论 -
修改element-ui某个深层元素
在style经常用scoped属性实现组件的私有化时,要改变element-ui某个深层元素(eg:.el-input__inner)或其他深层样式时,需要使用/deep/,如.conBox /deep/ .el-input__inner{ padding:0 10px;}注意,/deep/在vue 3.0会报错, 如果/deep/报错,可采用::v-deep,效果基本一样.conBox ::v-deep .el-input__inner{ padding:0 10px;}深原创 2021-01-30 15:34:38 · 368 阅读 · 0 评论