Vue之iView Ui库在小demon中出现的使用情况

今天iView来开始一个项目 好的
搭建下载看官方文档就好 命令太多 真的记不住

第一个错:
在这里插入图片描述
Iview会将标签渲染成html,但是这样结束标签会报错,在vs里面设置就好了
打开设置,搜索“vetur.validation.template” 取消对勾就好,然后重启,
接下来是盗图的截图:
在这里插入图片描述

第二个问题:
写菜单栏的时候 点击一个 全部都触发了 因为代码是动态绑定数据的,如下
这是脑抽这是脑抽
在这里插入图片描述

第三个问题
在使用vue 的router-link 中想要添加事件,直接写click 是没有用的,需要添加native修饰符,因为route-link是会组织click等事件的,
官网解释: 你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
我的解释就是,使用可以理解.native 是把一个组件转化为一个普通的html标签,如果本先元素就是一个html标签,那么native就是没有用的。

第四个问题:
实时监听路由的地址,来改变数据 当前使用的watch,computer也是可以使用的,两个有一定的区别,但是现在我时间有点紧,我只能说是,不区别了!!!

watch:{
  $route(to,from){
    console.log(to);
  }
},

今天继续记录“

第五个问题:
想要数据里面进行渲染下拉表格,但是因为用的是iview组件,下拉列表里面不允许有数据的重复,导致只能默默的写死,
然后本来想要去重的,发现并不简单,留个坑。在这里插入图片描述
可以使用set,但是因为是汉字,所以这个是没来得及删减的玩意。所以留个坑

第六个问题:
在使用分页器的时候 遇到好多坑 都在备注里面
如何使用page的改变的事件 如何设置 一页显示多少条
在这里插入图片描述

第七个问题
在使用table表格的时候,由于是按照获取的数据,进行动态输出的,因此跟添加的数据的顺序有很大的关系,因此要使用table的排序的方法,
第一次实验: : 可以给对应表头的信息里面添加 sortType:“asc”, 这个是表示顺序的,逆序是 sortType:“desc”, , 但是这个样子只能把当前渲染的数据的id进行排序啊。这个跟我渲染的id的顺序有关系,因为使用了map,导致数据最后传输回去的时候,会让数据从大到小进行排列。


          sortable: true, //开启排序
          sortType: "asc", //顺序排序,desc是逆序
          //进行自定义的排序方法
          sortMethod: function(a, b, type) {
            //a是比较的第一个值,b是比较的值, type是确定排序顺序的
            let at = parseInt(a);
            let bt = parseInt(b);
            console.log(at,bt)
            if (type === "desc") {
              return at > bt ? bt : at;
            } else return at > bt ? at : bt;
          }

一定要写sorttable的值, 这里贴一个另一个博主写的,免得忘了

https://blog.csdn.net/qmzmzxk/article/details/81748422

好的,又留下一个坑,就是那个滤波,,,!!!! 因为是分页显示数据,在iview中使用滤波的话 只能显示当前页面的,因此只能够全部获取,这样子,发送的东西就很多 l。。。。。gg

发布了35 篇原创文章 · 获赞 2 · 访问量 9823

猜你喜欢

转载自blog.csdn.net/qq_39532595/article/details/89007396
今日推荐