欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

iview组件使用总结

程序员文章站 2024-03-18 22:24:16
...

用iview组件做一个后台管理系统,以下是使用过程遇到的问题,以及解决方法总结

问题1:iview的表单验证默认是string,当value值是number类型会报错

解决方法:将type值改为number

ruleValidate:{
        building: [
            { type: 'number', required: true, message: '必须选择数字', trigger: 'change' }
        ]
  }

问题2:树形结构组件渲染有问题

问题描述:项目中设置用户权限时用到树形组件,在用户列表中点击设置权限按钮弹出modal框,点击按钮的同时请求数据回来渲染树形结构,一般是第一次点击没问题,当点击其他用户的设置权限按钮渲染的树形结构就有问题

//树形组件
<Tree :data="curTreeData" show-checkbox ></Tree>

//js
data() {
   curTreeData = []; 
}
...
methods:{
    getTreeData: function () {
        getAllResources().then(res => {
          this.curTreeData = res.data;
        })
      }
}

解决方法:每次请求树形数据之前先将curTreeData初始化


...
methods:{
    getTreeData: function () {
        this.curTreeData = [];//初始化
        getAllResources().then(res => {
          this.curTreeData = res.data;
        })
      }
}
相关标签: vue iview