说明：很久没有开发过后台管理系统，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;
}
}
以后遇到的数据处理都会放在这个链接中传送门
.
扫一扫
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
