Element 问题总结

背景

在之前一直是从事的C端的前端开发工作，在开始中也很少用一些框架（Vant、Mint等），也有三四年没有做过PC的项目了。新的工作方向是偏B端的后台系统，一些框架（Element-ui、echarts等）和坑都不太了解，以此来做些记录，同时也希望能够帮助到和我有相同困扰的Developer。

问题记录

1. form 表单校验问题

   select 校验 保持初始值和接口返回的默认值类型一样 trigger: 'change'

   rules:{
     sex: [
       { required: true, message: '请选择性别', trigger: 'change' }
     ]
   }
   

2. el-dialog 组件 在2.0 和 3.0 是否显示的属性不同

   :visible.sync=""

   v-model="dialogVisible"

3. 处理table数据且是循环渲染的。 可以用插槽 scope

   <el-table-column prop="status" label="">
     <template #default="scope">
       <div>{{scope.row.status | verifyName}}</div>
     </template>
   </el-table-column>
   

4. el-upload 2.0 上传图片

5. <el-upload
      :disabled= "isDisabled"
      :action="uploadActionUrl"
      :data="uploadData"
      :headers="requestHeader"
      :before-upload="beforeUpload"
      :on-success="function(response, file, fileList) { return handleSuccess(response, file, fileList)}"
      :file-list="picList()"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :limit="1"
      list-type="picture-card">
     <em class="areaName" v-html="areaName"></em>
   </el-upload>
   

6. Element-plus 进度条

7. Element-plus 设置表格头部样式 header-row-class-name

   <el-table 
     :data="tableData" 
     header-row-class-name="table-header" 
     style="width: 100%">
   </el-table>
   

8. el-input 校验输入数字（正则），两种方案：

   • 输入时限制，用正则replace
   • 输入后限制，通过设置 validator 来做信息提示

   <el-input
     v-model="number"
     @input="this.value = this.value.replace(/[^\d^.]+/g,'')"
     placeholder="请输入内容">
   </el-input>
   

9. element 自定义样式在本地生效，生产环境不生效

   webpack打包顺序是从main.js 自上而下执行，导致自定义样式被Element样式覆盖导致，主要是下面两者的执行顺序，先执行ElementUI 再执行 router

   import ElementUI from 'element-ui'
   import router from './router'
   

10. element resetFields()重置表单不生效问题

    • 此方法用于将form表单的数据设置为初始值
    • 而这个初始值是在form mounted生命周期被赋值上去的
    • 所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了

    场景：先编辑后新建

    解决：在赋值的时候可用this.$nextTick()，这样就不会改变form表单的初始值了

    // 初始化表单
    data() {
      return {
        form: {
          cityId: null,
          cityName: ''
        }
      }
    }
    ​
    // 赋值
    this.$nextTick(() => {
      this.form = {
        cityId: '12',
        cityName: '北京'
      }
    })
    ​
    // 重置表达
    this.$nextTick(() => {
      ;(this.$refs['formWork'] as any).resetFields()
    })
    

11. this.$route.push() 路由跳转页面数据不刷新的问题

    可以在activated() 的时候更新数据