Vue中iView组件的一些用法

iview table数据排序

通过给 columns 数据的项，设置 sortable: true，即可对该列数据进行排序

• 排序默认使用升序和降序，也可以通过设置属性 sortMethod 指定自定义排序函数，接收三个参数 a 、 b 和 type，自定义内部排序函数参考代码如下：

          {
            title: '更新时间',
            key: 'updateTime',
            minWidth: 120,
            align: 'center',
            render: timeTableRender,
            sortable: true,
            sortMethod: (a, b, type) => {
              if (type === 'desc') {
                return parseInt(a) < parseInt(b) ? 1 : -1
              } else {
                return parseInt(a) > parseInt(b) ? 1 : -1
              }
            }
          }
  

• 如果使用远程排序，可以设置 sortable: 'custom'，然后在触发排序事件 @on-sort-change后，进行远程排序，并手动设置新的 data，详见 API。远程排序需要指定参数 sort 和 order

iview中评分组件 Rate 修改

• 导入组件

{{ item.score}}
 

• 效果图

  

• 存在的问题：无法直接修改星星的颜色

  比如下方的代码设置color为red，但组件颜色并没有变成红色

• 解决过程

  • 浏览器检查代码，找到星星颜色对应的样式代码，可以看到继承了来自父级元素的样式

    

  • 第一想法自然是把这段样式代码复制到自己的代码中，然后修改颜色，改了后还是没效果

  • 再次检查元素，发现自己修改的代码被加上了随机数"data-v-68f887ed"

   .ivu-rate-star-full[data-v-68f887ed]:before {
       color: #23d6f5;
   }
  

  • 网上查了下原因

    • 项目采用Less作为CSS 预处理语言。在组件中习惯于使用一个带有scoped属性的Style标签，scoped 属性的效果，就是在编译打包后，在当前组件能一眼看到的标签中统一添加一个随机的属性，编译的css也会对应加上那个随机属性

  • 解决办法：使用样式穿透（深度选择器）
    在我们想穿透的选择器前边添加 >>> 或者 /deep/ 或者 ::v-deep，less中建议选择 /deep/

  • 加上之后，评分组件的颜色修改成功了！