element-ui 使用分享

weixin_42017624

已于 2023-02-03 14:49:11 修改

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： vue.js javascript html5

于 2021-03-26 15:57:47 首次发布

本文链接：https://blog.csdn.net/weixin_42017624/article/details/115227799

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文汇总了Vue项目中使用Element-UI遇到的各种问题及其解决方案，包括：select组件自定义change事件传递值，表单验证的清除，日期时间组件的更新问题，行内表单元素填充，隐藏域的使用，el-dialog居中，以及表单验证、树形组件、列表拖拽排序等复杂交互的处理。同时也展示了如何处理特殊字符输入和组件绑定计算属性的方法。

摘要由CSDN通过智能技术生成

当select组件的change事件需要传入自定义的值时：

  <el-select v-model="levelValue" placeholder="请选择" @change="( (val) => test(val, 'levelValue'))">
    <el-option
      v-for="item in levelOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>

element-ui form清除单个表单效验结果

清空单个输入框验证方法，主要是先找到这个fields

let _field = this.$refs[表单ref设置的名称].fields /*当然，你可以打印一下fields*/
_field.map(i => {
    //通过prop属性值相同来判断是哪个输入框，比如：要移除prop为'user'
    if(i.prop === 'user'){ 
        i.resetField() 
        return false
    }
})
 
// 此时就不会出现，动态清除user值会出现效验的问题，当然，有人会问：“那这样清空了，提交时候就不会进行效验了？”，其实提交的时候，调下validate这个验证方法还是会进行效验的复制代码

dateTimeRange组件日期回显异常：

场景：el-form组件中的数据来源form由父组件传入，在编辑时，修改了日期组件的时间后，发现页面上的时间并没有成功更新，但是form中的数据是已经成功修改了

解决方案：首先将传入的数据来源改为异步的方式（.sync），在日期组件上，不要使用change函数（因为无法触发），改用input函数，然后在input绑定的函数中使用emit

<commonModal
    ref="commonModal"
    :form.sync="modalForm"
    :formLabel="formLabel"
    :rules="rules"
    @rowSave="rowSave"
    @cancelModal="cancelModal"
>
</commonModal>

<el-date-picker
    v-model="form[item.model]"                 
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    format="yyyy-MM-dd HH:mm"
    @input="dateTimeChange"                
>
</el-date-picker>

dateTimeChange() {
    let formData = this.deepClone(this.form);
    this.$emit("update:form", formData);
},

当使用了行内表单后，出现单行的元素无法占满的情况：

解决方案：

给form-item设置class后加入以下代码

      .result-item {
        display: flex!important;
        /deep/ .el-form-item__content {
          flex: 1;
        }
      }

element表单使用隐藏域：

                <el-input v-show="false" v-model="postData.systemId"></el-input>

vue 项目中 Element 库的组件 el-select 的 change 事件触发问题

问题描述：通常我们的需求是改变 select 的选项才会触发 change 事件，但是意料之外，页面初始化的时候也会触发 change 事件。

应用场景：例如新增/编辑页，页面有个二级联动的下拉，eg: xx 省、xx 市。省与市都有值的情况下编辑省就会清空市，但是进编辑页的时候，理想情况下，省和市都应该有值。但是由于编辑省的时候change事件中将市给清空了，而进编辑页初始化的时候又会默认调change事件，所以进编辑页的时候市的值就为空了。

期望：进入编辑页的时候省与市都有值，编辑省的时候将市清空。

解决方法：设置一个标志，根据标志决定执行那些方法。若页面初始化时不需要调用市的下拉列表，则可以将change时间单独写入一个方法，在另一个方法中进行调用。

data() { 
  return { 
    changeFlag: false 
  } 
}, 
methods: { 
  changeDwmc(val) { 
    if (this.changeFlag) { 
      // 修改选项时操作 
      this.form.city_id = ''; 
    } else { 
      // 进入页面时，页面初始化              
      this.changeFlag = true; 
    } 
    // 其他共同操作 
  } 
}

elementui表单自定义校验及嵌套验证:

elementui表单自定义校验及嵌套验证 - 简书

element栅格5等分

element栅格5等分_xy405580364的博客-CSDN博客_element 五等分

使用表格树形时，使用序号时会将序号设为展开收缩，而不是我们需要的字段展开收缩

解决方案：给序号字段的el-table-column设置type属性，这样没有type属性的第一列就会视为展开收缩了

ElementUI 树形表格懒加载-新增修改删除等操作进行局部刷新数据

第十篇 ElementUI 树形表格懒加载-新增修改删除等操作进行局部刷新数据_Yzt_199626的博客-CSDN博客_element树形表格懒加载局部刷新

表格树形新增数据时，新增的子节点没有加载：

 refreshRow(id) {
      getLazyList(id, {}).then((res) => {
        if (
          res.data.code === 200 &&
          res.data.data &&
          res.data.data.length > 0
        ) {
           this.$set(this.$refs.typeTable.store.states.lazyTreeNodeMap, id, res.data.data);
        }
      });
    },

//新增或者修改后使用

解决element树形组件选字节点时，没有全选子节点时获取不到父级节点的Id问题

this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())


      pickerOptionsEnd: {
        disabledDate: (time) => {
          return time.getDay() !== 1// 只能选择周日
        }
      },

饿了么组件绑定计算属性

      <el-select
        v-model="releaseScopeModel"
        :disabled="isPreventionUpdate"
        class="re-wp-100"
        size="mini"
        multiple
        :collapse-tags="!isPreventionUpdate"
        clearable
        placeholder="请选择发布范围"
      >
        <el-option v-for="foo in preset.communityList" :key="foo.communityId" :label="foo.name" :value="foo.communityId" />
      </el-select>
    
// 计算属性
    releaseScopeModel: {
      get() {
        const releaseScopeList = this.preventionForm.releaseScope ? this.preventionForm.releaseScope.split(',').map(Number) : []
        const list = releaseScopeList.filter((foo) => {
          return this.preset.communityList.find((bar) => bar.communityId === foo)
        })
        return list
      },
      set(val) {
        this.preventionForm.releaseScope = val.join(',')
      },
    },