element组件使用心得当选择器在最右边时，选择时间会出现20px边距问题。并且该时间选择器div跟vue根文件同级

1表格中使用popover

在表格中直接使用popover将无法显示，需要添加ref

<ElTableColumn label="操作" align="center" width="200">            
<template slot-scope="scope">              
<ElButton size="mini"  icon="el-icon-edit"  circle  style="margin-right:10px"     @click="editpage(scope.row)"/>              
<el-popover :ref="scope.row.id" placement="top" width="300">                
<p>确定删除该用户吗？</p>                
<div style="text-align: right; margin: 0">                  
<el-button size="mini" @click="cancelInput(scope.row.id)">取消
</el-button>                  
<el-button   type="primary"     size="mini"      @click="deldata(scope.row)">确定</el-button >                
</div>  
<ElButton  slot="reference"  size="mini"   icon="el-icon-delete"  circle  type="danger" />              
</el-popover>            
</template>          
</ElTableColumn>

2时间日期选择器边距问题

当选择器在最右边时，选择时间会出现20px边距问题。

并且该时间选择器div跟vue根文件同级，因此无法穿透改变组件样式。

<el-date-picker              
v-model="dateForm.CustomDate"              
:disabled="SchedulingDisplay"              
popper-class="date-picker-style"              
type="datetime"              
format="yyyy-MM-dd HH:mm"              
placeholder="选择日期时间">            
</el-date-picker>

<style>
/*TODO 无法穿透到最外层时间选择器，去掉时间选择有边距问题，待解决 */
.date-picker-style .el-time-panel {  
left: -20px;}
</style>

3 el-checkbox改变排列方式

checkbox只能横向排列，采用穿透可将其变成竖型

.dialog-class >>> .el-checkbox-group {  
display: flex;  
flex-direction: column;
}

4 table表格头部动态生成

<template v-for="(col, index) in tableFieldsList">                
<el-table-column  :key="index" :prop="col.name"   :label="col.name"  align="center" >
</el-table-column>             
 </template>

5 form表单项动态生成并添加校验

<template v-for="(col, index) in addTableForm.domains">            
<el-form-item   
v-if="col.label === primaryKey"   
:key="index"  
:prop="'domains.' + index + '.value'"              
:label="col.label"              
:rules="{  
required: true,                
message: '主键内容不能为空',                
trigger: 'blur',              
}"            
>              
<el-input v-model="col.value"></el-input> 
</el-form-item>            
<el-form-item v-else :key="index" :label="col.label">              
<el-input v-model="col.value"></el-input>            
</el-form-item>          
</template>

6多form表单校验

<el-form        
ref="employee1"           
label-width="230px"        
:model="employee"        
:rules="rules">

<el-form        ref="employee2"        label-width="230px"        :model="employee"        :rules="rules"      >

<el-button type="primary" @click="onEdit('employee1', 'employee2')"            >编辑</el-button>

 let p1 = new Promise((resolve, reject) => {        this.$refs[formName1].validate((valid) => {          if (valid) {            resolve()          }        })      })      let p2 = new Promise((resolve, reject) => {        this.$refs[formName2].validate((valid) => {          if (valid) {            resolve()          }        })      })

Promise.all([p1, p2]).then(() => {        console.log('')      })

7表单校验上传组件

<el-form-item label="八闽健康码" prop="dialogImageUrl">          <el-checkbox-group v-model="info.dialogImageUrl"></el-checkbox-group>          <el-upload            action=""            :limit="1"            list-type="picture-card"            :on-preview="handlePictureCardPreview"            :on-remove="handleRemove"            :on-exceed="handleExceed"            :on-change="handleChange"            :auto-upload="false"            :before-upload="beforeAvatarUpload"            :file-list="fileList"          >            <i class="el-icon-plus"></i>          </el-upload>          <el-dialog :visible.sync="dialogVisible">            <img width="100%" :src="info.dialogImageUrl" alt="" />          </el-dialog>        </el-form-item>

添加一个el-checkbox-group