element-ui
关注
分享
扫一扫
Akatsuki233
这个作者很懒，什么都没留下…
展开
-
element-ui给表格某列加样式
<el-table :cell-style="changeCellStyle"></el-table> changeCellStyle({ row, columnIndex }) { if (row.status === '未提交' && columnIndex === 8) { return { ...原创 2020-04-09 11:17:42 · 1737 阅读 · 0 评论 -
element-ui 的 messageBox按钮位置对换
参考https://blog.youkuaiyun.com/Dg_Zing/article/details/87898715转载 2020-03-10 17:45:37 · 2877 阅读 · 0 评论 -
element-ui表格回显时默认全选数据
html部分 <el-table :data="form.roomers" style="width: 100%" border tooltip-effect="dark" ref="multipleT...原创 2020-02-26 10:11:00 · 1484 阅读 · 0 评论 -
element-ui如何动态添加垂直表头跟数据
<el-table :data="tableData" style="width: 100%" border :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"> <el-table-column :label...原创 2020-02-26 10:04:51 · 901 阅读 · 0 评论 -
element-ui表单验证加规则几种方法
要加验证之前一定要确保已经写了 prop属性，该属性是跟rule绑定在一起的。1.行内式 <el-form-item :label="$t('phone1')" prop="phone" :rules="[{ required: false, pattern: /^((\+\d{2}-)?0\d{2,3}-\d{7,8})|((\+\d{2}-)?(\d{2,...原创 2020-02-11 19:49:48 · 735 阅读 · 0 评论 -
element-ui树形控件 取部分值时父id也要一起拿到传给后端
基础用法 <el-tree :data="resourceData" ref="tree" node-key="id" :props="{ label: 'name', ...原创 2020-01-10 15:03:09 · 604 阅读 · 0 评论 -
element-ui之多选框的使用
多选框<el-checkbox-group v-model="items"> <el-checkbox v-for="(item, index) in allItems" :key="index" :label="item.id">{{item.label}}</el-checkbox></el-checkbox-group>&l...原创 2019-11-06 10:18:11 · 1432 阅读 · 0 评论 -
element-ui之穿梭框的使用以及空行问题
基础使用<template> <el-transfer :data="data" v-model="value"></el-transfer></template><script>data () { // data需要包含key跟label。是左边穿梭框所有的数据，value是右边的数据。 data: [...原创 2019-11-06 09:59:29 · 2197 阅读 · 1 评论 -
element-ui 上传多张图片并显示图片列表 / 修改时显示图片列表
template部分： <el-row class="searchForm"> <el-col :xs="24" :sm="24" :md="24" :lg="24"> <el-form-item label="正文图片"> <el-upload action...原创 2019-09-06 16:25:55 · 5571 阅读 · 0 评论 -
element-ui 的table中让某个单元格变色
<el-table :cell-style="yellowBg"></el-table>methods中： // 未指派时，背景变黄rowIndex是第几行，columnIndex是第几列 yellowBg ({row, column, rowIndex, columnIndex}) { if (row.statusName === '...原创 2019-09-02 16:33:08 · 5469 阅读 · 0 评论 -
前端渲染跟后端渲染的区别
前端渲染：前后端分离，前端先写好页面后，拿到后端给的api接口，把数据添加到页面中渲染出来。如果没有后端，只是不能进行数据交互，用户还是能看到页面的。右键查看网页源代码，前端渲染的东西只能看到渲染后的，而无法看到原来的代码。后端渲染：数据跟页面都是一起渲染到浏览器上的。如果没有后端，那么整个页面都会出不来，因为数据跟页面是一起渲染到浏览器上的。而后端渲染的 ，右键查看网页...原创 2019-07-17 18:30:01 · 523 阅读 · 0 评论 -
element-ui 轮播图/幻灯片/走马灯，点击轮播图之后出来一个放大的轮播图对话框
以下为自适应宽高的，注意行内样式中间使用分号隔开的，不是逗号，否则会不生效。外面的轮播图<el-carousel height="150px" arrow="always" indicator-position="none" @change="carouselChange"> <el-carousel-item v-for="(item, index) in e...原创 2019-07-05 18:28:29 · 7254 阅读 · 0 评论 -
vue+element-ui 表单的 el-input 第二次修改时无法输入
由于新增跟修改用的是同一个弹窗，所以当修改提交时，要清空 input 框内的值。提交时不能只把 父对象formData 设置为空对象。即this.formData = {} 是错误的正确的写法为this.formData = {name: '' }原因：如果把this.formData设置为空，this.formData.name 就是 undefined，此时就会赋值不上。 ...原创 2019-07-10 16:47:20 · 3928 阅读 · 1 评论 -
查询条件下拉框联动，如果一级为空，二级也为空
直接祭出代码template中 <el-col :xs="24" :sm="12" :md="8" :lg="6"> <el-form-item label="楼宇"> <el-select v-model="searchData.buildingId" clea...原创 2019-06-28 18:33:46 · 927 阅读 · 0 评论 -
filter 对已知数组进行筛选，返回为true的元素或对象并组成一个新数组
定义和用法filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。注意：filter() 不会对空数组进行检测。注意：filter() 不会改变原始数组。 arr = [{a:1,b:2,isChecked:true},{a:0,b:1,isChecke...原创 2019-06-21 16:34:59 · 4671 阅读 · 0 评论 -
传值给后端需为 int 类型，但一开始默认为空的搜索条件如何传0给后端
加一个判断，当一开始的搜索条件为空时，给相应的字段重新赋值为0。此处不可用this.searchData.building = 0的形式赋值。否则一开始刷新，页面会显示0。 /* 获取表格列表 */ searchInfo () { let searchDataFinal = {} if (this.searchData.building =...原创 2019-06-25 11:26:08 · 2621 阅读 · 0 评论 -
如何修改，在哪里修改滚动条样式
修改滚动条的样式，public.less中：/* 滚动条 */::-webkit-scrollbar { width: 8px; // 右边滚动条宽度height: 6px; // 下面滚动条高度background-color: rgba(201,208,220,1);} /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { bord...原创 2019-03-29 14:32:33 · 262 阅读 · 0 评论 -
简易版垂直表头的表格（vue版本）
方法一<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>垂直表头</title> <meta name="v...原创 2019-04-08 14:42:09 · 1523 阅读 · 0 评论 -
表单搜索条件清空、重置注意事项
el-form需要接收一个model，并且需要配合el-form-item一起使用，并且在el-form-item上绑定prop属性，resetField方法才能好使。<el-form :model="addServiceData" ref="addServiceForm"> <el-form-item label="手机号" prop="mobi...转载 2019-04-16 15:33:42 · 1338 阅读 · 0 评论 -
element-ui / 表单之正整数验证，小数点后为0也要除外
// template中：<el-form :model="dialogForm" ref="dialogForm" :rules="dialogFormRules"> <el-form-item label="年龄" prop="age"> <el-input v-model.trim="dialogForm.age"> ...原创 2019-04-16 16:58:50 · 5697 阅读 · 0 评论 -
element-ui中的 slot 插槽
Dialog 分为两个部分：body和footer。footer需要具名为footer的slot。name 为 footer 里面的 el-button 会插入到 组件el-dialog 中 footer的地方。<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-butt...原创 2019-04-16 19:26:40 · 7948 阅读 · 0 评论 -
当element-ui标签页tabs栏slot中的数据是异步加载的无法更新
element-ui标签页tabs栏slot中的数据，一进入页面调用 search 方法，获取到的数据给num，但此时无法立即刷新num，一进来只有小红点，而小红点中没有数据思路：让组件强制刷新（销毁并重置），即加一个 v-if 条件。v-if 官方解释 ：v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。方法一：更新...原创 2019-04-25 19:29:00 · 4418 阅读 · 0 评论 -
利用递归遍历出数组对象中的children的值在Cascader 级联选择器中显示
直接上代码<el-cascader :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>element-ui所要求的数据格式： options: [{ value: 'zhinan', ...原创 2019-04-25 19:44:57 · 3108 阅读 · 0 评论 -
element-ui 一整行变色/某个单元格变色
* row 表格每一行的数据* column 表格每一列的数据* rowIndex 表格的行索引,不包括表头,从0开始* columnIndex 表格的列索引,从0开始公共的template中:<el-table :data="tableData" style="width: 100%" :row-style="isRed" @selection-change="select...原创 2019-04-17 20:12:40 · 9558 阅读 · 1 评论 -
element-ui中手机号/中文姓名/英文姓名/密码/邮箱/日期 等简单的验证规则（vue）
验证手机号/中文姓名/英文姓名/密码/邮箱等：data : { // 设置身份证号的验证规则 const idCard = (rule, value, callback) => { if (!value) { callback(new Error('请输入身份证号')) } else { const re...原创 2019-04-28 15:48:33 · 3584 阅读 · 0 评论 -
ElementUI el-time-picker DatePicker 日期选择器 显示到分钟不显示秒 24小时制 选择三天内日期 结束日期大于开始日期 时间字符串比较大小
显示到分钟不显示秒<el-date-picker type="datetime" :placeholder="new Date('ch',{hour12:false}).toLocaleString()" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" v-model="searchData.timeStart" ...原创 2019-05-23 11:40:04 · 13243 阅读 · 0 评论 -
element-ui表单加判断条件显示必填或非必填 :required
需求： 如果下拉框中选中的国家为中国，省份为必填；如果选中的为外国， 省份为非必填。<el-col :xs="24" :sm="12" :md="12" :lg="6"> <el-form-item :label="国家" prop="country"> <el-select clearable v-model="from.country...原创 2019-05-30 18:05:57 · 23245 阅读 · 3 评论 -
vue element-ui中table合计指定列求和
注意点：1.<el-table> 中 加:summary-method="getSummaries"2.<el-table-column> 中要加 prop // 房间号的合计去掉 getSummaries (param) { const { columns, data } = param const sums ...原创 2019-05-29 10:45:10 · 11336 阅读 · 0 评论 -
element-ui表格table增删改查时多选/选择当前行
表单数据的增删改查如何判断选择到的是哪一行？需求：删除多行，查看一行的详情。<el-button type="primary" @click="delButton">删除</el-button><el-button type="primary" @click="modifyAndDetail('查看详细', false)">查看详细</el-but...原创 2019-03-25 15:56:57 · 1266 阅读 · 1 评论