1. form表单的布局
能够通过<el-row> <el-col :span(默认是将整个屏幕分成24)> 标签来扭转格局;还能够通过<div>外面的style标签(margn-xx[左,右]) 来扭转布局 align 抉择居中靠右还是靠左 ;
2. table表格内文字过多主动换行显示不雅观
在<el-table>标签内应用
:show-overflow-tooltip="true"就能够鼠标放在内容哪里就主动显示全部内容然而如果内容过多的话会铺满全屏,在<style>标签内加上
<style>
.el-tooltip__popper {
max-width: 20%;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
background: rgb(48, 65, 86) !important;
color: #fff !important;
line-height: 24px;
}
</style>
会比拟难看些
3. 对于:model 和v-model form表单应用:model 如果不应用的话 rules输入框就算输出文字 还是会有提示信息,
4. 对于elementUI日期组件格局转换
<el-form-item label=”毕业工夫:” prop=”graduationDate”>
<template>
<div class="block">
<span class="demonstration"></span>
<el-date-picker style="width: 200px;" size="mini" v-model="formdata.graduationDate" align="right" type="date"
placeholder="抉择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
</el-form-item>
value-format=”yyyy-MM-dd” 日期格局转换
5.遇到的一个性能 @change
再点击下拉选项的时候执行的一个函数
依据下拉框的抉择的值不同能够用来扭转其四周的属性值
6. 后盾返回的值是数值 在前台转换为数值对应的label :formatter
为每一列绑定属性formatter,值为一个函数,返回要翻译成的中文字符串
<el-table-column prop="expertsp" :formatter="getExpertsp" label="审批状态" width="85">
</el-table-column>
data中的定义
Expertsp: [{
value: '1',
label: '新增'
}, {
value: '2',
label: '审批中'
},
{
value: '3',
label: '审批通过'
},
{
value: '4',
label: '审批不通过'
}
],
// 有多少条数据此函数就会触发多少次(后盾传数据,前台遍历显示对应的值)函数
getExpertsp(row, col) {
for (var i in this.Expertsp) {
if (this.Expertsp[i].value == row.expertsp) {
return this.Expertsp[i].label
}
}
},
7.vue 给每行加序号
①咱们想在 el-table 中增加序号列时，如下
<el-table-column label="序号" type="index" width="50" align="center">
</el-table-column>
咱们会惊奇的发现，咱们翻页时，序号永远都是从1开始。因为每一次翻页都是依据以后数据的index显示，所以咱们要自定义
革新如下
<el-table-column label="序号" type="index" width="50" align="center">
<template scope="scope">
<span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
两种
<el-table-column label="序号" type="index" width="60" :show-overflow-tooltip="true">
<template scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
8.下拉选框里的性能
clearable 可革除下拉框里内容
filterable 搜寻性能 能搜寻此字段的存在内容
9.遇见的一个性能,在本页面跳转后 在关上的页面返回,刷新原本的界面
// 跳转后页面刷新 和data,methods同级
beforeRouteLeave(to, from, next) {
console.log(to.path)
to.meta.keepAlive = false
next()
},
10. 解决界面无奈渲染,然而属性有值,无奈显示
办法:
手动渲染
this.$forceUpdate() //数据档次太多的时候,能够手动调用,触发render函数进行自动更新
this.$set(this.formdata,’firstname’,name + sex)
本人了解的意思: this.formdata(能够使form的绑定属性,也能够是table; ‘firstname’是属性名字单引号; name + sex是赋值给firstname的值)
发表回复