element-ui使用常见问题

评价一个ui框架的优劣,当然易用性啦~~
1.最常见的问题:form表单的每一项的prop属性是为了提供表单验证,尽量填写,而且名字需要和每个表单项绑定的值的名字一致,否则表单验证validate方法和重置表单resetFields方法不起作用。
2.el-menu-item菜单组件的index属性是可以起router作用的,必须是字符串。el-submenu的Index的值如果相同,则同时展开关闭一级菜单项。
3.为防止默认激活(default-active)的菜单项在点击页面刷新后丢失,每次点击需要将激活菜单项存入sessionStroage中。每次created的时候,将其取出,存在本地渲染。
4.表单渲染过程中要经常用到作用域插槽(在最新的vue版本中已失效,通过v-slot替代),渲染数据。

<el-table-column label="状态">
  <template slot-scope="scope">
    <el-tag v-if="scope.row.state=='0'">未提交</el-tag>
    <el-tag type="success" v-else>已通过</el-tag>
  </template>
</el-table-column>

5.在使用MessageBox消息确认组件的时候,需要用async await解析其返回的Promise对象。当用户选择取消的时候会报错,需要catch一下异常。

const confirmResult = await this.$confirm(
        '是否确认删除计划?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

6.在使用tag组件的动态编辑标签时,按照要求,按照例子,使用this.$nextTick。页面再次渲染后,再让input框获得焦点,不然还没渲染出来就获取焦点容易报错。

showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

7.使用el-upload上传文件的时候,可以通过:data属性加上id作为额外参数直接上传成功。也可以调用on-success上传成功后返回的路径(如果后端返回)加上其他表单项一起提交。可以设置手动上传。如果使用了token,需要在组件的header属性设置对应的Authorization字段。
8.npm包的版本、版本、版本。项目中引入对应的组件不生效(尤其是样式类的),那么第一时间查找的问题一定是版本是否对应。
ps前端渲染技巧:三元选择、多层循环、递归(函数内部调用自己),及本地玩转各种数组、字符串,该重新获取列表就获取,该改变局部数据就改变局部,武功招式、在于灵活运用。

持续更新。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值