elementUI常见问题汇总

1：下拉框，输入框输入不显示等回显问题

方法1：给el-select加@change事件
<el-select v-model="ruleForm.fChecker" placeholder="请选择" filterable @focus="elDatePickerOnFocus" @change="changeUpdate()"> <el-option v-for="(item, index) in options" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select>
给el-select加 @input事件
<el-input v-model="ruleForm.fMaintainDuration" type="number" placeholder="保养时长" @change="changeUpdate()" @input="changeUpdate($event)"></el-input> methods: { changeUpdate(){ this.$forceUpdate() }, }
以上基本解决此问题。
方法2：加@click="$set(ruleForm, ruleForm.fMaintainDuration, $event)"

<el-input v-model="ruleForm.fMaintainDuration" type="number" placeholder="保养时长" @click="$set(ruleForm, ruleForm.fMaintainDuration, $event)" @change="changeUpdate()"></el-input>
方法3：在方法中加：
this.$set(this.ruleForm, 'fMaintainDuration', data[0].fMaintainDuration)

2：table框的折叠面板，折叠显示长度较长的字段fMessage

<el-table>
<el-table-column type="expand" label="" width="30">
	<template slot-scope="scope">
		<div class="content">
			 <div v-html="scope.row.fMessage"></div>
		 </div>
	</template>
</el-table-column>  
</el-table>

3：默认日期选择方式：

方法1：
date: [
	new Date(new Date().toLocaleDateString()).getTime() - (24 * 30 * 60 * 60 * 1000),
	new Date(new Date().toLocaleDateString()).getTime() + 7 * 24 * 60 * 60 * 1000 - 1000
	 ],
方法2：要引入moment：
在main.js文件中引入
import moment from 'moment'
Vue.prototype.$moment = moment;
date: [
	this.$moment(new Date().getTime() - 7 * 24 * 60 * 60 * 1000 - 1000).format('YYYY-MM-DD'),
	this.$moment(new Date().getTime()).format('YYYY-MM-DD')
      ],//默认过去一周

昨天零点时间戳：StartDate: new Date(new Date().toLocaleDateString()).getTime()-(24 * 60 * 60 * 1000),
今天零点时间戳：EndDate: new Date(new Date().toLocaleDateString()).getTime()-(24 * 60 * 60 * 1000)+24 * 60 * 60 * 1000,
此刻时间戳：Date.parse(new Date())，此刻日期：inputTime: new Date(),
<el-date-picker style="width:100%" v-model="formData.inputTime" type="datetime" placeholder="选择日期时间">
								</el-date-picker>

时间插件渲染

<el-date-picker size="small"  value-format="yyyy-MM-dd hh:mm:ss" :picker-options="pickerBeginDateBefore" style="width:100%"
 v-model="lastReplaceDate" type="datetime" :placeholder="$t('common.pleaseSelect')">																	
</el-date-picker>
data(){
lastReplaceDate:''
}
有时候后台返回字段渲染的时候，再次选择时间会element报错 “t.getFullYear is not a function” ，TypeError：date.getHours is not a function
这个时候是因为日期时间格式不对应，类型不对，比如前端是需要字符串，后台返回null，就会报错。再比如后台返回2022/2/5 10：05：12，这个时候前端是2022-2-5 10：05：12，也会导致报错哦

3：Vue+Element中的表格根据属性值来渲染不同的样式

//两种状态的判断
<el-table-column label="当前"
   prop="status">
    <template slot-scope="scope">
        <span :style="{ color: scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status === 1 ? '男' : '女' }}</span>
    </template>
</el-table-column>
//三种状态的判断
<el-table-column 
    label="当前" 
    prop="status"
    >
    <template slot-scope="scope">
        <span :style="{ color: scope.row.status === 0 ? '＃ff':scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status == 0 ? '已过期':scope.row.status === 1 ? '授权' : '未授权' }}</span>
    </template>
</el-table-column>

4：vue 动态加载图片路径报错解决方法，循环遍历图片不显示图片

解决方法：https://www.cnblogs.com/qingcui277/p/8930507.html

5：elementUI el-input每次输入一个字符后自动失去焦点（因为v-for绑定的key值原因）

6:后端返回数据换行前端渲染问题 

关键要素：加span标签包裹起来
1.后台返回格式\n,例如：msg:"你好\n我是你大哥"
<el-descriptions-item label="全检批次" ><span style="white-space: pre-wrap;">{{msg}}</span></el-descriptions-item>
2.后台返回格式<br/>,例如：msg:"你好<br/>我是你大哥"
<el-descriptions-item label="全检批次"><span v-html="msg"></span></el-descriptions-item>