vue、elementui组件

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自带的原生点击事件