element 中的常见问题整理分享

谁借莪１个温暖的怀抱￠ 2022-09-08 11:55 174阅读 0赞

**1、form 下面只有一个 input 时回车键刷新页面**

原因是触发了表单默认的提交行为，给el-form 加上@submit.native.prevent就行了。

<el-form inline @submit.native.prevent>
      <el-form-item label="订单号">
        <el-input v-model="query.orderNo" :placeholder="输入订单号查询" clearable @keyup.enter.native="enterInput" />
      </el-form-item>
    </el-form>

**2、表格固定列最后一行显示不全**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA6Z2S6KGj5rWP6Ziz_size_22_color_FFFFFF_t_70_g_se_x_16_pic_center]

这种情况有时在宽度刚好处于临界值状态时会出现。因为固定列是独立于表格body动态计算高度的，出现了固定列高度小于表格高度所以造成最后一行被遮挡。

// 设置全局
    .el-table__fixed-right {
      height: 100% !important;
    }

**3、只校验表单其中一个字段**  
在一些用户注册场景中，提交整个表单前有时候我们会做一些单独字段的校验，例如发送手机验证码，发送时我们只需要校验手机号码这个字段，可以这样做：

this.$refs['form'].validateField('mobile', valid => { 
      if (valid) { 
        // 发送验证码
      }
    })

**4、表格内容超出省略**  
看到有小伙伴在代码里自己手动去添加CSS来实现，害，又是一个不看文档的反面例子，其实只要加个show-overflow-tooltip就可以了，还自带tooltip效果

<el-table-column label="名称" prop="customerName" show-overflow-tooltip>
    </el-table-column>

**5、表格跨分页多选**  
根据文档，只需加上row-key和reserve-selection即可。

<el-table row-key="id">
      <el-table-column type="selection" reserve-selection></el-table-column>
    </el-table>

**6、表头与内容错位**

// 全局设置
    .el-table--scrollable-y .el-table__body-wrapper {
     overflow-y: overlay !important;
    }

**7、弹窗重新打开时表单上次的校验信息未清除**

<el-dialog @close="onClose">
      <el-form ref="form">
      </el-form>
    </el-dialog>
    
    // 弹窗关闭时重置表单
    onClose() {
      this.$refs['form'].resetFields()
    }

**8、输入框用正则限制但绑定值未更新**

<el-input v-model="form.retailMinOrder" placeholder="请输入" onkeyup="value=value.replace(/[^\d.]/g,'')" />

更好的方法

<el-input v-model="form.retailMinOrder" placeholder="请输入" @keyup.native="form.retailMinOrder=form.retailMinOrder.replace(/[^\d.]/g,'')" />

**9、去除type="number"输入框聚焦时的上下箭头**

**10、el-checkbox超出部分省略显示，鼠标移入提示全部**  
解决办法给el-checkbox设置title 属性

<div class="main">
      <el-checkbox-group v-model="selectId" @change="selectAccount">
        <el-checkbox v-for="(item, childIndex) in accountData" :key="childIndex" :title="item.name.length>6?'item.name':''" :label="item.advertiser_id">{
       { item.name }}</el-checkbox>
      </el-checkbox-group>
    </div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA6Z2S6KGj5rWP6Ziz_size_22_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/25baf0aaa3ad41618fbf74d3d9c4bded.png