Vue2 + ElementUI使用注意事项

一、序

最近有个项目使用的框架是vue2 + ElementUI的，以此博客记录下碰到的坑点，避免下次踩坑。

二、Vue2注意事项

2.1 async + await接口对接

// 查询获取列表
const { data } = await getList(this.queryForm)
// 获取data里的list和total
const { list, total } = data

// 直接获取data下的list
const {
  data: { list },
} = await getList()

2.2 v-if和ref冲突

在ref(或者上一级)有v-if控制元素的显示隐藏，会导致后面this.$refs['menuTree']或者this.$refs.menuTree为undefined，没办法获取信息。

可以使用v-show代替，位置放在更上一级

三、ElementUI注意事项

3.1 Input输入框组件

3.1.1 浏览器自动填充用户名密码

在密码输入框加上auto-complete="new-password"就行了，不需要管用户名的输入框

<el-input
    v-model="form.password"
    auto-complete="new-password"
    maxlength="20"
    placeholder="请输入密码"
    show-password
    show-word-limit
  />

3.2 Checkbox多选框组件

场景： 用户选择角色，角色变量roleArr属于form对象

form: {
   id: null,
   username: '',
   password: 'Asbgz123',
   realName: null,
   roleArr: [],
 },

错误现象： 页面复选框后的文本显示不出来或者选择一个其他也自动选择。各种百度，大部分人都说是checkbox组件v-model绑定的变量定义为字符串了，一番排查不是这个问题，后来无意在一个博客看到答案，说是绑定的变量层级太深，然后我把roleArr从form下移出来，定义到根目录下，问题解决。

3.3 Cascader 级联选择器

场景： 树形层级选择，比如部门。element-plus有了treeselect组件，但是element还没有。以往都是使用riophae/vue-treeselect，这次想偷懒，顺便试试Cascader级联选择器的使用。

3.3.1 设置选择任意节点

默认只能选择最后一级节点，但是很多时候我们需要选择一些父节点。

可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。

<el-cascader
   v-model="parr"
   clearable
   :options="options"
   :props="{ checkStrictly: true, value: 'id', label: 'name' }"
   @change="changeParent"
 />

3.3.2 获取选中节点值

el-cascader绑定的值主要是数组，值是从顶级-->父级(可能多个)-->选中项，所以v-model绑定的值并不是所选节点。是需要数组的最后一级，即：value[value.length - 1]。

3.3.3 回显选中项

既然有获取选项的问题，那么回显肯定也不会那么简单。v-model绑定的值不能只是选中项，必须包含所有层级，从顶级-->父级(可能多个)-->选中项。

3.4 Form表单

3.4.1 rules表单验证

① 常规输入框校验

{ required: true, trigger: 'blur', message: '请输入部门名称' }

② 选择校验(适用于单选、复选、下拉框)

{ required: true, trigger: 'change', message: '请选择性别' }

③ 正则表达式校验(邮箱校验)

{
  pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
  trigger: 'blur',
  message: '邮箱格式错误',
}

④ 自定义校验规则
注意定义的位置

data() {
  const checkParent = (rule, value, callback) => {
    if (!value) {
      value = this.parr
    }
    if (!value || 0 === value.length) {
      callback(new Error('请选择上级部门'))
    } else {
      callback()
    }
  }
  return {
    form: {
      pid: 0,
      name: '',
    },
  }
}

{
  required: true,
  trigger: 'change',
  validator: checkParent,
},

4、el-tree树形组件

<el-tree
   ref="menuTree"
   :data="menuList"
   default-expand-all
   node-key="id"
   show-checkbox
 >
   <template #default="{ data }">
     <span>{{ data.name }}</span>
     <span v-if="data.perms">（{{ data.perms }}）</span>
   </template>
 </el-tree>

4.1 获取选中值

这里主要的情况是父节点是半选中

// 所有菜单节点数据
 getMenuAllCheckedKeys() {
   // 目前被选中的菜单节点
   let checkedKeys = this.$refs['menuTree'].getCheckedKeys()
   // 半选中的菜单节点
   let halfCheckedKeys = this.$refs['menuTree'].getHalfCheckedKeys()
   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
   return checkedKeys
 },

4.2 选中值回显

data.menuArr.forEach((v) => {
  this.$nextTick(() => {
    this.$refs['menuTree'].setChecked(v, true, false)
  })
})

这里一定要这样设置，虽然组件有个默认选择 default-checked-keys，但是这样会把父节点下的子节点全部选中。