说明:很久没有开发过后台管理系统,elementui都好久没有用过了,踩了一些小坑,特意记录下:
element 特点:a.组件的一般输入的值/可以选择的值,都是绑定在v-model 上面
b. 在组件上面绑定值,一般来说需要 :属性名=属性值
,这个写法
c. 在组件上面设置 style=“width: 300px” 可以直接修改组件的宽度
1. input 组件–输入框 ,防止用户输入空格-在v-model 后面加上 .trim
:
<el-form-item label="任务名称">
<el-input v-model.trim="allData.taskName" placeholder="请输入"></el-input>
</el-form-item>
input 输入框 ,只能输入数字
oninput="value=value.replace(/[^\d]/g,'')"
// 只能输入数组并且限制最大长度
oninput="value=value.replace(/[^\d]/g,'');if(value.length>4)value=value.slice(0,4)"
功能代码示意–注意设置这个, 这个只能设置value属性名,否则该功能不会生效,然后还需要在data(){}里面设置 value:''
v-model.trim="dialogData.autoSendMessageTaskDO.inputSendTime"
placeholder="请输入"
maxlength="5"
oninput="value=value.replace(/[^\d]/g,'')"
style="display: inline-block; width: 100px"
补充修改input组件样式:
做法:给直接父盒子一个类名,
<!-- 描述 -->
<div class="describe">
<el-input v-model="item.desc" class="nickname" placeholder="请输入内容"></el-input>
</div>
然后样式代码如下:
// describe这个是直接父盒子的类名(需要根据自己设置的盒子类名来设置), 后面一节不用管input.el-input__inner 直接复制就好。
/deep/ .describe input.el-input__inner {
height: 20px;
font-size: 12px;
vertical-align: bottom;
text-align: left;
border: none;
padding-left: 0;
margin-top: 2px;
font-size: 16px;
}
2.select选择器:需求功能: 多选-搜索-根据搜索的关键词,将符合条件的内容筛选出来(本地搜索):
// filterable - 搜索功能
// multiple- 多选功能 el-option标签-选择内容,设置可以选择的内容, 还支持change 事件,当用户选中时触发
// 选中的value值,label是展示给用户看的,实际选中的值是 value
<el-select
v-model.trim="profilePlatformUid"
filterable
:reserve-keyword="true"
placeholder="请输入,可多选"
style="width: 300px"
multiple
@change="profilePlatformUidChange"
>
<el-option
v-for="(item, index) in enterpriseList"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
有时候要获取后台数据,对数据进行拼接,再生成列表给用户选中,这样其实可以直接再label标签上,进行拼接。不用进行其他处理,代码如下:
// 后台这里返回的是一个数组,里面是对象,对象里面有两个属性courseName courseId , 要把他们拼接起来,可以直接像下面这样写。
<el-option
v-for="item in enterpriseList"
:key="item.courseId"
:label="`课程名称:${item.courseName} / 课程ID: ${item.courseId}`"
:value="item.courseId"
></el-option>
3. 组件el-dialog-卡片,一般用来设置弹出层:
visible- 控制卡片是否展示渲染的开关-布尔值 before-close -这是点击卡片右上角的关闭按钮触发的事件
<el-dialog
title="xxxx"
width="50%"
:visible.sync="isVoluntarilyFlag"
:before-close="handleClose"
:close-on-click-modal="false"
>
</el-dialog>
4. 解决el-form标签内 label中的字体过多掉落下来,不在同一行显示问题,禁止修改功能:
// disabled - 禁止修改,设置后此表单内容的所有内容只能用于展示,不能修改-接受布尔值
// 注意: form表单校验只会校验 model绑定的对象内的属性值,比如这里他就只会校验autoSendMessageTaskDO这个对象中的属性值,非autoSendMessageTaskDO这个对象中的属性值,不予校验。
// rules --设置校验规则- 类型:对象,设置在`data(){}`里面
// style="white-space: nowrap" 解决lable 标签字过多掉下来问题
// label-width="100px" 修改 label 宽度
<el-form
:disabled="disabledp"
ref="Form"
size="small"
:model="dialogData.autoSendMessageTaskDO"
inline
:rules="rules"
label-width="100px"
style="white-space: nowrap"
>
// 校验规则--可以支持自定规则
rules: {
value1: [{ required: true, message: '开始日期和结束日期为必选项', trigger: 'change' }],
taskName: [
{ required: true, message: '请输入任务名称', trigger: 'blur' },
{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' },
],
}
5.form表单校验:
说明: prop绑定的属性,不是 form表单标签上面绑定的属性的属性值,一直触发校验,也不会报错,截图上面字打错了,是一直会触发校验。
表单中 v-if 已经隐藏了的项,是不会触发校验的。
清空表单校验产生的校验消息:
this.$nextTick(() => { this.$refs.Form.clearValidate(); // 清空表单校验 });
–这个是清除整个表单产生的校验消息
清除表单中单个项的校验信息:
功能代码:
form 为 表单标签上面设置的 ref属性
fields 不用管他,不要修改就这样
content是 prop 属性绑定的属性名, --这个就是具体清除那个项产生的校验信息
const _field = this.$refs.Form.fields;
_field.forEach((i) => {
if (i.prop === 'content') {
i.resetField();
}
});
// 其实就是获取整个表单绑定的具体值,比如这里表单里面 有一个输入框绑定的值是,content 属性, 我要单独清空这个项的校验信息, 先获取该表单所有绑定的值,判断是否是需要清空校验的项,再来清空校验规则。
6.时间日期选择器el-date-picker
带颜色部分是过去时间,不能被选中
// 1. 选中的时间会以数组形式存储在 v-model绑定的属性中,第一项是,开始时间,第二项是结束时间
// 2. change事件触发时机是在用户选择完开始结束时间后,点击确认按钮触发。
// 3. type="datetimerange" 设置时间日期选择器的类型
// 4. format="yyyy-MM-dd HH:mm:ss" 自定义选中后展示在界面给用户看的-时间日期格式
// 5. value-format="timestamp" 设置选中后返回的时间格式-时间戳-类型为number,
// 6. reserve-keyword 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词
// 7. :picker-options="pickerOptions" - 这绑定的是事件-作用:使用户无法选中已经过去的时间,只能选择当日和未来时间
// 选中后返回的时间为—— [185444557,554785522]
<el-form-item label="xxx:" prop="value1" class="uu">
<el-date-picker
v-model="dialogData.autoSendMessageTaskDO.value1"
@change="startEndTime"
:clearable="false"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss"
value-format="timestamp"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
// 禁止选择已过去时间
pickerOptions: {
// 选择处理时间
disabledDate(time) {
return time.getTime() < Date.now() - 3600 * 1000 * 24;
},
}
将标准格式时间转换为时间戳:
标准时间格式:2021-01-11T16:22:28.000+0000
const time =new Date(这里放置要转换的时间).getTime();
7. input输入框设置最大最小输入长度:
// show-word-limit 是否显示字数统计
// maxlength="20" -最大字数
// minlength="1" -最小字数
<el-form-item label="任务名称:" prop="taskName">
<el-input
v-model.trim="dialogData.autoSendMessageTaskDO.taskName"
placeholder="请输入"
maxlength="20"
minlength="1"
show-word-limit
style="width: 300px"
></el-input>
</el-form-item>
8.el-radio 单选:
示意图:
// 1. :label -- 就是代表这个单选选中的值-数字类型,
// 2. 支持change事件,当用户选中时触发
// 3. 也是 v-model 绑定的值,来决定是否选中
<el-form-item label="消息类型:" prop="messageType">
<el-radio-group v-model="dialogData.autoSendMessageTaskDO.messageType">
<el-radio :label="1" @change="remove(1)">文本</el-radio>
<el-radio :label="3" @change="remove(3)">图片</el-radio>
<el-radio :label="19" @change="remove(19)">文件</el-radio>
</el-radio-group>
</el-form-item>
9. el-upload文件上传:传送门上传文件代码
10. 解决select 选择器 input输入框 、时间日期选择器el-date-picker 赋值后,出现无法修改选中更改问题: 传送门:赋值后出现无法选中修改操作解决办法
11. 数据处理: 直接将后台返回数据的属性名修改成自己需要的属性名:
list - 为需要处理的数据体
value label: 是想要需要的属性名
item.nichname 是上面需要被修改属性名
const list007 = list.map((item) => {
return {
value: item.platformUid,
label: item.nickname,
};
});
12.数据已经修改了但是视图没有更新:
本次我遇到的是 修改数组中某个对象中的某一个属性,数据已经修改成功了,但是视图却没有修改成功。
解决办法使用this.$set,来修改数据,这样才会触发视图更新。
比如要修改:allCard数组中,某项(对象)中的某个属性值:
allCard: [
{
iconUrl: '',
title: '请添加名称',
desc: '请用一句话描述',
thumburl:
'xxxx',
pagepath: '',
remark: 'xxx', // 备注
isSelectAppletCard:false
},
{
iconUrl: 'xxxx',
title: '请添加名称',
desc: '请用一句话描述',
thumburl: '',
pagepath: '',
isSelectAppletCard:false
}
]
// this.allCard --为要修改的对象 val为修改数组中对象的索引值 { ...this.allCard[val] } 是要修改对象所有数据的数据
this.allCard[val].isSelectAppletCard = true; // 这里是对要修改数组中对象的某个属性,进行修改
this.$set(this.allCard, val, { ...this.allCard[val] }); // 把修改后的该对象,重新用this.$set修改下,这样就会触发视图更新。
- el-dialog 弹窗居中
/deep/ .el-dialog {
display: flex;
flex-direction: column;
margin: 0 !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: calc(100% - 30px);
max-width: calc(100% - 30px);
}
/deep/ .el-dialog .el-dialog__body {
flex: 1;
overflow: auto;
}
- 修改 input 相关的组件样式 —设置input高度,里面箭头位置大小 , 宽度随便写个行内样式就能改动
在组件上加上 class="inputClass"
//
.inputClass{
/deep/ .el-input__inner {
height: 28px;
line-height: 28px;
font-size: 12px;
}
/deep/ .el-select__caret {
height: 28px;
line-height: 28px;
}
/deep/.el-input__inner {
padding-left: 5px;
padding-right: 18px;
}
/deep/.el-input__suffix {
right: -1px;
}
/deep/ .el-select__caret {
font-size: 12px;
}
}
以后遇到的数据处理都会放在这个链接中传送门 .