elementUI 组件 实用

1. el-form 表单验证之后，滑动条定位到未验证通过的item 

this.$refs[formName].validate(async (valid, errFields) => {
   if (valid) {
   } else {
     showFormErrMsg(
        this.$refs[formName],
        errFields
     );
   }
});

showFormErrMsg(elForm, errFields) {
  let errMsg = null
  let errField = null
  for (let i = 0; i < elForm.fields.length; i++) {
    let temp = elForm.fields[i]
    if (errFields[temp.prop]) {
      errField = temp
      errMsg = errField.validateMessage
      break
    }
  }
  Message.error('请正确填写信息:' + errMsg)

  // 滚动到可视区
  if (errField) {
    errField.$el.scrollIntoView({
      behavior: "smooth",
      block: "center",
      inline: "nearest",
    });
  }
}

2. el-table 表格添加拖拽

使用Sortablejs 插件，sortablejs 中文文档

// 拖拽表格排序
    setSort() {
      const el = this.$refs['meunTable'].$el.querySelectorAll(
        ".el-table__body-wrapper > table > tbody"
      )[0];

      this.sortableObj = Sortable.create(el, {
        group: 'id',
        dragClass: '.el-table__row',

        setData: function(dataTransfer) {
          dataTransfer.setData("Text", "");
        },

        // 监听拖拽事件结束时触发
        onEnd: evt => {
          const { newIndex, oldIndex } = evt;
            


        }
       })
    }