1.常见问题
注意:如果开发过程中,发现代码没有任何问题,但是前端页面没有出现相应的效果,先刷新浏览器的页面试试
查看一个vue框架搭建的项目中可运行的脚本,全局搜索 scripts,下面就会出现可以运行的脚本
1.1.头像(图片)无法显示
<el-avatar shape="square" :size="90" src="../assets/g.jpg" style="float:left;" :key="1"></el-avatar>
出现问题:这是一个头像的插件,代码写上去,却发现页面无法显示图片,其实原因是:在element组件上使用相对路径,webpack并不会对路径进行处理,所以出现无效路径(被解析为根目录下的images)
解决办法::src=“require(‘…/assets/g.jpg’)”
使用require里面在写上相对路径,就可以显示了
1.2.input输入框相关问题
1.2.1.input值无法删除
<el-input v-model="this.dialogJdCompanyCode" />
如果使用this对来绑定v-model,input的值无法被键盘清除。解决办法:将this去掉
<el-input v-model="dialogJdCompanyCode" />
1.2.2.input的@change事件
当input中的值发生改变(前提:input有值,且值发生改变)并且当前input失去焦点,@change事件才会触发。举个例子,如果input中是"'并且该值没有发生变化,那么失去焦点@chagne事件也不会触发
1.3.select下拉框无法选中的问题
1.3.1.问题出现背景
当使用this.infoForm.quality=""将select之前选中的值清空时,再次选则select的下拉框时,有数据源但是无法选中(并不是所有的都这样,就碰见了一个是这样的,其他的使用这种方式赋值都正常,很尴尬)。
猜测:应该是对象赋值的原因,对象赋值变成非对象赋值就好了
示例:将infoForm.quality变成quality(前提,infoForm.quality、quality都已经在data中进行声明)
<el-form-item prop= 'quality' label="目标库物料品质" >
<el-select v-model="infoForm.quality" placeholder="请输入">
<el-option v-for="(item,index) in desReservoirQuality"
:key="index" :label="item" :value="item" />
</el-select>
</el-form-item>
注意:若desReservoirQuality是数组,
例如desReservoirQuality = [‘好件’,‘坏件’],则进行v-for="(item,index) in desReservoirQuality"循环时,item就是数组内容(‘好件’、‘坏件’),index就是数组索引(1、2…)
1.3.2.解决办法
使用这种方式来赋值就可以了
this.infoForm = {...this.infoForm, quality: null}
1.3.3.思考
暂时还不知道这俩有啥区别
1.4.loding不起作用
背景:table中使用了:loading,但是不起作用;button中使用了v-loading但是不起作用
解决方式:将table中的:loading变成 v-loading;将button中的v-loading变成:loading,就好了,不知道怎么回事
1.5 el-table中每一列内容过长,不能横向滑动查看所有列
无法查看 table中所有列的内容
解决方式:为每一列设置一个固定宽度就可以横向滑动了,就是width属性
示例:
2.常见功能实现
2.1.table
2.1.1.表格显示数据时,特定行增加背景颜色
使用table组件的row-style属性,用该属性绑定一个函数,在函数中写自己的判断逻辑,注意,函数的返回值必须是一个对象的形式,然后里面是两个字符串;
cell-style和header-cell-style属性用来设置标题、以及标题对应的该列数据居中对齐
<el-table
:data="tableData"
class="mb15"
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{textAlign: 'center'}"
:row-style="tableRowClassName"
>
tableRowClassName(row, rowIndex) {
if (row.row.warning == 1 || row.row.warning == "1") {
return { "background-color": "burlywood" };
}
if(row.row.warning == 99 || row.row.warning == "99"){
return { "background-color": "crimson" };
}
}
2.1.2.居中显示
标题和内容居中显示
<el-table :data="tableData" style="width: 100%" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}">
某一列居中显示
<el-table-column prop="" label="" align="center" header-align="center" width="200" />
2.1.3.分页相关
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[5, 10, 30, 50, 100, 200]"
:page-size="pageSize"
layout="sizes, prev, pager, next, total"
:total="totalCount"
>
layout中如果不加total这个属性,页面中不会显示总的数据量,加了才会显示(就是那个 共…条)
2.2.cascader级联显示相关问题
props:用来定义cascader的一些属性,包括懒加载
懒加载:
当点击组件的时候,去查询数据,拿到下拉框展示的数据源;查询的结果都是用Promise对象包装,ElementUI内部会自动对此对象进行处理,并将它显示再组件上(所以不能直接赋值,因为都是异步Promise对象)
出现问题:
因为是懒加载的缘故,所以下拉显示的数据源只有在手动点击的时候才会显示,因而即使给它绑定了值,因为没有数据源的原因,文本框中也不会进行显示,当我们要做编辑这种需要回显的功能时,就需要特殊的处理。
解决办法:
将懒加载的属性设置为false,并手动查询数据源,然后直接给输入框绑定值,就能实现回显的功能了
2.3.数据脱敏/非脱敏显示
import feather from 'vue-icon':导入组件
Vue.use(feather, 'v-icon')
<div v-if="showName">
<v-icon style="width: 18px; height: 18px" name="eye" @click.native="offIconClick"></v-icon>
{{addressInfo.contactName}}
</div>
<div v-else>
<v-icon style="width: 18px; height: 18px" name="eye-off" @click.native="iconClick"></v-icon>
{{addressInfo.desContactName}}
</div>
其中<v-icon>中name属性包括 "eye,eye-off",表示数据脱敏(隐藏部分内容)显示、非脱敏(不隐藏内容)显示,并且,会有一个“眼睛”的图标,点击就会触发对应的事件(offIconClick,iconClick)
@click.native:这个好像是vue自带的原生点击事件