江苏龙网

  1. 主页 > 生活百科 > >

iview官网 vue？iview和element哪个好？( 二 )


reader.onload = function () {
if (reader.readyState == 2) {
const img = new Image();
img.src = https://www.08ts.cn/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 = https://www.08ts.cn/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的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站 。
查看更多关于iview官网的详细内容...
Tags：iview官网iview官网 vue


推荐阅读


上一篇：4k纸有多大和a3~~A3的纸的尺寸是多大的?

下一篇：邓超|邓超夫妇，年入3亿太惊人