2023.03.17

ElementPlus

一、input自动填充且autocomplete="off" 失效

在当前网页记住用户名和密码，添加用户时，用户名和密码（字段名相同）会自动填充

（1）readonly

在input框focus前，readonly为true，记住的用户名、密码无法自动填充，点击input后focus，readonly为false

（2）autocomplete="new-password"

在新版的谷歌浏览器支持的属性中，在 type="password"input框加 autocomplete="new-password"

（3）css仅兼容chrome

<el-input
   v-model.trim="form.password"
   type="text"
   class="no-autofill-pwd"
/>
.no-autofill-pwd {
  :deep() .el-input__inner {
    -webkit-text-security: disc;
  }
}

二、validator自定义校验失败

1.确保model，rules绑定正确

2.表单项prop、表单绑定值字段名相同例如为username，且rules中包含username（准确性）

！3.validator的自定义校验函数必须放在rules定义之前，否则，console无法打印，校验规则也不生效，不报错（顺序性）

4.每个自定义函数if语句需要完整if...else... 逻辑，否则validator失效（完整性）

<el-form
      ref="formRef"
      label-width="80px"
      :model="form"
      :rules="rules"
      require-asterisk-position="right"
    >
      <el-form-item
        label="用户账户"
        prop="username"
        autocomplete="off"
      >
        <el-input v-model.trim="form.username" />
      </el-form-item>
</el-form>

 const validateUsername = async (rule, value, callback) => {
      console.log('rule', value, rule)
      if (value) {
        const { res } = await duplicateCheck(paramsOfCheck) // 异步校验
        if (res.success) {
          callback()
        } else {
          callback(new Error('用户名已存在！'))
        }
      } else {
        callback()
      }
    }
// validateUsername一定在rules定义之前！！！
const state = reactive({
      formRef: null,
      form: {},
      rules: {
        username: [{ asyncValidator: validateUsername, trigger: 'blur' }],
      }
    })

三、resetFields失效

1.model，ref绑定
2.el-form-item中prop与表单项的 v-model 保持一致
3.编辑表单
在编辑表单时，需nextTick方法中赋值，则表单初始值则为state中表单默认值
不使用nextTick，则表单初始值为第一次点开编辑框时表单的赋值
4.resetFields() 是将表单项重置为初始值，而这个初始值是在 Vue mounted 时赋值上去的，如果在这之前对表单进行了赋值，则初始值会改变（例如 created 时），那么后面调用 resetFields() 则不会生效（不会是定义时的空值）。
解决方法：将赋值操作定义在 this.$nextTick() 中（保证了初始值不被修改）

四、tree全部折叠、全部展开

参考链接

 handleExpandAll() {
      const tree = this.$refs.treeRef;
      this.traverseTree(tree.store.root, (node) => {
        node.expanded = true;
      });
    },
    handleCollapseAll() {
      const tree = this.$refs.treeRef;
      this.traverseTree(tree.store.root, (node) => {
        node.expanded = false;
      });
    },
    traverseTree(node, callback) {
      if (!node) return;
      callback(node);
      const children = node.root ? node.root.childNodes : node.childNodes;
      if (children) {
        children.forEach((child) => {
          this.traverseTree(child, callback);
        });
      }
    }

四、type='selection' 变单选

<el-table
        ref="personnelTable"
        :data="allEngineers"
        @select="selectChange"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column type="selection" align="center" width="50" />
</table>
selectChange(e, row) {
      if (this.engineerId == row.id) {
        this.$refs.personnelTable.clearSelection()
        this.engineerId = ''
        return
      }
      this.engineerId = row.id
      this.$refs.personnelTable.clearSelection()
      this.$refs.personnelTable.toggleRowSelection(row)
},
headerCellStyle(header) {
      console.log('headerRowStyle', header)
      if (header.columnIndex == 0) {
        return { 'z-index': '-1' }
      }
},