element-ui 使用分享

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

  <el-select v-model="levelValue" placeholder="请选择" @change="( (val) => test(val, 'levelValue'))"><el-optionv-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

<commonModalref="commonModal":form.sync="modalForm":formLabel="formLabel":rules="rules"@rowSave="rowSave"@cancelModal="cancelModal"
>
</commonModal><el-date-pickerv-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())

element-ui树形控件(tree)将父级半选状态id和选中子级id一起传给后台,回显去掉父级半选状态id

element-ui树形控件(tree)将父级半选状态id和选中子级id一起传给后台,回显去掉父级半选状态id - 简书

vue+element-树形table子节点数据实现实时刷新

vue+element-树形table子节点数据实现实时刷新（亲测可用）_fynzhy的博客-CSDN博客

vue+element项目中过滤输入框特殊字符小结

vue+element项目中过滤输入框特殊字符小结 - Thinkguo - 博客园

elementUI el-dialog弹框居中

elementUI el-dialog弹框居中 - 董七 - 博客园

一个表单设置自定义规则或多个验证规则（：rules）

Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）_云中客的博客-CSDN博客_elementui表单验证切换rules

elementui列表组件（树数据）+sortable.js 实现仅同层级拖拽排序

elementui列表组件（树数据）+sortable.js 实现仅同层级拖拽排序_qingwu1104的博客-CSDN博客_sortable

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