踩坑记录（10-更新中）

10. background 图片比例缩小

正常引入图片，发现设置的宽高和图片不一致，设置的17px，图片20px，原本一行代码可以：
background: url(../images/icon/new.png) 1px no-repeat;
现在需要图像扩展或缩小，以使宽度和高度 完全适应内容区域，bacnkround-size有个属性：contain可以实现:

background: url(../images/icon/new.png) 1px no-repeat;
background-size: contain;
1
2

参考：background 图片比例缩小_如何更精准控制背景图片？

11. 不选最后一个元素设置样式

其实就是not(:last-child)的用法：

  <ul>
    <li>第一个元素li>
    <li>第二个元素li>
    <li>第三个元素li>
    <li>第四个元素li>
  ul>
1
2
3
4
5
6

    ul {
      list-style: none;
    }
    li {
      display: inline;
    }
    li:not(:last-child) {
      color: red;
    }
1
2
3
4
5
6
7
8
9

效果如下：

参考：not(:last-child)的用法

12. 数组去重

最简单的set去重：

let arr = [1,2,2,4,3,4,1,3,2,7,5,6,1];
let newArr = new Set(arr)
console.log(arr) // [1, 2, 2, 4, 3, 4, 1, 3, 2, 7, 5, 6, 1]
console.log(newArr) // Set(7) {1, 2, 4, 3, 7, 5, 6}
1
2
3
4

参考：数组去重的五种方法

13. Vue+element-ui 使用row-class-name修改el-table某一行解决背景色无效

找了半天发现是自己加了stripe属性，取消就好了。

参考：Vue+element-ui 使用row-class-name修改el-table某一行解决背景色无效

el-talbe 使用row-style动态修改表格行颜色

Vue + ElementUI表格状态区分，row-class-name属性

14. el-tree invalid prop: type check failed for prop 'checkStrictly. expected boolean

找出原因：checkStrictly这个属性需要的是布尔值，加冒号即可：
:check-strickly="true"

参考：Invalid prop: type check failed for prop “xxx“报错处理
vue—element中el-tree树形结构的check-strictly属性

15. 把一个对象里的id筛选放入数组里

使用map方法：

	let arr1 = [
      {
        name: 'Amy',
        age: 10,
        money: '100',
        code: '12311'
      },
      {
        name: 'Bill',
        age: 8,
        money: '100',
        code: '12322'
      },
      {
        name: 'Cindy',
        age: 17,
        money: '1000',
        code: '100011111'
      },
      {
        name: 'Dora',
        age: 13,
        money: '200',
        code: '12344'
      },
      {
        name: 'Elena',
        age: 16,
        money: '500',
        code: '12355'
      },
      {
        name: 'Fiona',
        age: 13,
        money: '1000',
        code: '100022222'
      },
    ]
    let arr2 = arr1.map(item => {
      return item.name
    })
    console.log('名字：', arr2)
    // 名字： (6) ['Amy', 'Bill', 'Cindy', 'Dora', 'Elena', 'Fiona']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

参考：从对象数组里筛选某个属性作为新数组

16. 从数组包对象里拿到指定的一项

用find方法：

    let arr1 = [
      {
        name: 'Amy',
        list: [
          {
            value: '01',
            label: '一号'
          },
          {
            value: '02',
            label: '二号'
          },
          {
            value: '03',
            label: '三号'
          }
        ]
      },
      {
        name: 'Bill',
        list: [
          {
            value: '01',
            label: '是'
          },
          {
            value: '02',
            label: '否'
          }
        ]
      },
      {
        name: 'Cindy',
        list: [
          {
            value: '01',
            label: '金'
          },
          {
            value: '02',
            label: '木'
          },
          {
            value: '03',
            label: '水'
          },
          {
            value: '04',
            label: '火'
          },
          {
            value: '05',
            label: '土'
          }
        ]
      }
    ]
    let arr2 = arr1.find(item => item.name === 'Bill').list
    console.log(arr2)
    // 0: {value: '01', label: '是'}
    // 1: {value: '02', label: '否'}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61