⭐iview官网 vue？iview和element哪个好？

本篇文章给大家谈谈iview官网,以及iview官网 vue对应的知识点，希望对各位有所帮助，不要忘了收藏本站！

内容导航：

• iview 2.x 升级到3.0报错 按照官网配置了全局transfer 和 size 两个属性？
• iview二级路由第一次点击的时候不高亮
• iview和element哪个好
• Upload组件上传限制（宽、高、尺寸、格式）
• vue.js iview使用官网例子Radio-group无法生效 单/复选框不显示文字怎么解决？
• iview的表格行/列合并

Q1：iview 2.x 升级到3.0报错 按照官网配置了全局transfer 和 size 两个属性？

zn=conv(xn,yn)

xn=deconv(zn.yn)

主要的语句就是这两句

Q2：iview二级路由第一次点击的时候不高亮

可以用router-link的属性：active-class和exact。

什么要使用router-link? 官网上说明了这几点好处：组件支持用户在具有路由功能的应用中（点击）导航。通过to属性指定目标地址，默认渲染成带有正确链接的a标签，可以通过配置tag属性生成别的标签。另外当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。

Q3：iview和element哪个好

这两组都是英文字母，相比较的话，我会选择后者，虽然看不懂，但是我一定会努力学习它

Q4：Upload组件上传限制（宽、高、尺寸、格式）

iview-Upload组件官网链接： https://iview.github.io/components/upload

效果展示

css

.out-box{

width: 100%;

border: 1px solid #e6e6e6;

border-radius: 8px;

padding: 20px 20px 10px;

}

.img-border{

border: 1px solid #e6e6e6;

border-radius: 8px;

margin-right: 20px;

width:100px;

height:100px;

}

.upload-box{

width: 100px;

height:100px;

display: inline-block

}

.upload-inner-box{

width: 100px;

height: 100px;

font-size: 40px;

text-align: center;

background: #F5F5F5;

}

.upload-tip{

color:red

}

template

<div>

<img v-if="seeView" :src="this.imageUrl"  />

<Upload ref="uploadFiles"

:show-upload-list="false"

:max-size="5120"

:on-success="handleSuccess"

:on-exceeded-size="handleMaxSize"

:before-upload="beforeUploadImg"

:loading="true"

type="drag"

:format="['jpg','jpeg','png','gif']"

:on-format-error="handleFormatError"

action="url"

class="upload-box">

                <div>

               <div >+</div>

               <div >请上传图片</div>

</div>

</Upload>

<div>图片大小勿超5M，尺寸为{{minWidth}}*{{minHeight}}，勿小于该尺寸，且尽量以该长宽比制图以保证页面效果</div>

</div>

data

seeView:"false",//是否展示已上传的图片

imageUrl:"",//上传图片的url

url:"",//上传的地址

minWidth:number,//最小宽度

minHeight:number,//最小高度

methods

//上传成功

    handleSuccess(response, file, fileList) {

      this.imageUrl = response.result;

      this.seeView = true;

    },

    //上传的文件大小超出要求

    handleMaxSize() {

      this.$Modal.warning({

        title: "提示",

        content: "上传缩略图大小不能超过5M!!!",

      });

    },

    //上传文件格式不符合要求

    handleFormatError() {

      this.$Modal.warning({

        title: "提示",

        content: "上传缩略图格式错误!!!",

      });

    },

    //上传前对图片宽高的检验

    beforeUploadImg(file) {

      this.checkImageWidth(file, minWidth).then((checkWidth) => {

        if (checkWidth) {

          this.checkImageHeight(file, minHeight).then((checkHeight) => {

            if (checkHeight) {

              this.$refs.uploadFiles.post(file);

            }

          });

        }

      });

      return false;

    },

    // 异步方法 检验图片宽度

    async checkImageWidth(file, widthCheck) {

      let width = await this.getImageWidth(file);

      let checkWidth = width > widthCheck || width == widthCheck;

      if (!checkWidth) {

        this.$Notice.warning({

          title: "图片宽度错误",

          desc:

            file.name +

            " 的宽度为" +

            width +

            "px, 请上传宽度大于" +

            widthCheck +

            "px的图片. ",

        });

      }

      return checkWidth;

    },

    // 获取图片宽度

    getImageWidth(file) {

      return new Promise((resolve) => {

        const reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload = function () {

          if (reader.readyState == 2) {

            const img = new Image();

            img.src = reader.result;

            img.onload = function () {

              resolve(this.width);

            };

          }

        };

      });

    },

    // 异步方法 检验图片高度

    async checkImageHeight(file, heightCheck) {

      let height = await this.getImageHeight(file);

      let checkHeight = height > heightCheck || height == heightCheck;

      if (!checkHeight) {

        this.$Notice.warning({

          title: "图片高度错误",

          desc:

            file.name +

            " 的高度为" +

            height +

            "px, 请上传高度大于" +

            heightCheck +

            "px的图片. ",

        });

      }

      return checkHeight;

    },

    // 获取图片宽度

    getImageHeight(file) {

      return new Promise((resolve) => {

        const reader = new FileReader();

        reader.readAsDataURL(file);

        reader.onload = function () {

          if (reader.readyState == 2) {

            const img = new Image();

            img.src = reader.result;

            img.onload = function () {

              resolve(this.height);

            };

          }

        };

      });

    },

Q5：vue.js iview使用官网例子Radio-group无法生效 单/复选框不显示文字怎么解决？

iview官方提供的不对，联系参考http://www.it399.com/blog/html/201805231405在线助手的解决方案。

Q6：iview的表格行/列合并

最近的一个项目里面有一个需求是这样的，要实现表格第一列和最后一列相同的内容合并成一格，形成的结果就是多条有相同字段的数据放在表格里面看起来就是一条数据，但是中间的列还是显示每条数据不同的部分。实现的结果如下图

而项目用的UI库iview虽然官网上有介绍 表格行列合并 ，但是看完示例之后我是一脸懵逼的，完全就没有说清楚好不好，也有可能是我理解有问题吧。参考了网上的一些文章才最后弄懂这个东西怎么用，这篇文章就把这个记录下来以备以后忘了可以查看。

先按照官网上的写法来理解一遍

column配置照着官网文档写就行，而数据其实还是四条

最重要的是span-method

第一处if-else判断：

rowIndex === 0代表第一行，columnIndex === 0代表第一列

return [2, 1] 代表需要合并2行1列

同理 rowIndex === 1 && columnIndex === 0代表第二行第一列

return [0, 0]代表合并0行0列，即它是被合并的单元格

同理可得第二个if-else判断就是把第三行第一列和第四行第一列合并在了一起，而最后一列的合并和第一列的合并基本相同，至此这个表格就算完成了。

注意： rowIndex和columnIndex都是从0开始的， return[0, 0] 都是代表的被合并的单元格。

项目中的数据肯定不会这样写了，从上面的 span-method 方法可以看出这个里面实际上进行了数据的遍历，所以我们可以先把接口拿到的数据处理好，然后在 span-method 中直接返回设置好的值就行了。写到这里我发现直接写下去有点难，我在项目里面后台返回的是一个分组之后的数据，所以很直观的就做出来了，如果取到的数据是一个散乱的一维数组，假设后台也懒得给你分组，那么整套流程就需要前端自己完成了。

为了使思路清晰一点，我们从结果反向推导：

这里用到了一些操作数组的方法，以下划线开头的，来自 lodash ，最后得到的一维数组就是table组件要用的data。

最后将上面几步合起来，我们就能从原始的数据得到table组件需要的数据了。table组件在合并单元格之后最好使用 disabled-hover 将hover样式去掉。

----------- 2021/10/18更新 -----------

最近做element的项目发现element官网上的判断方法挺好的，可以参考一下

https://element.eleme.cn/#/zh-CN/component/table#he-bing-xing-huo-lie

View UI （iview）表格 行/列合并 教程

关于iview官网和iview官网 vue的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。