前端开发踩坑笔记（2021-10）

目录

1、由于子组件修改了从父组件读取的值而出现的报错

2、对于el-table表格多选的限制 ，限制多选可选的个数

3、提取数组对象的某个属性值，组成新的字符串或数组

4、两个el-table表格（横向可能有滑动）同时展示的情况如何控制两个表同时滚动

5、表格数据特别多的时候用el-table导致页面卡顿

6、 :nth-child()选择指定的某几项进行样式渲染

7、重写elment-ui样式的时候不起作用

8、判断某一个js对象中含有的键值的个数

9、 两个对象的合并Object.assign(a,b)

10. 某个元素在数组中的索引值(下标)怎么查？

11. 将两个数组组成对象数组的快捷方式

12. 字符串与数字之间的互相转换

13. 字符串与数组之间的互相转换

14. 删除字符串的最后一个字符

15. 字符串和对象之间的互相转换

16. 查询当前窗口的dom节点个数

17. 使用umy-ui时固定列不显示问题

1、由于子组件修改了从父组件读取的值而出现的报错

问题：

vue.min.js:6 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "data" found in

原因：

子组件修改了props方法从父组件传过来的参数

解决：

在data中另外定义一个值，用来接收来自父组件的参数，在 computed中进行赋值，如果直接只在data中赋值那么该数只会在该子组件被创建时赋值一次，在watch中进行监听。

2、对于el-table表格多选的限制 ，限制多选可选的个数

问题：

官方文档中的多选为全选，在实际的业务需求中可能存在只能选择固定几项的情况

解决：

/** 多选框选中数据（用户） */
//备注：this.length是多选框至多选择的个数
    handleSelectionChange(selection) {
      if (selection.length > this.length) {
        this.$message.warning(
          "至多还可添加" +
            this.length +
            "名成员,默认添加前" +
            this.length +
            "名选中的成员"
        );
        selection.forEach((item, i) => {
          if (i > this.length - 1) {
            this.$refs.multiple.toggleRowSelection(selection[i], false); //超出指定选择个数后，多选中的selection设为false
          }
        });
        selection = selection.splice(0, this.length);
      }
    },
​

3、提取数组对象的某个属性值，组成新的字符串或数组

问题：

存在数组对象 arr=[{x:1}, {x:2}, {x:3} ]，若想将x中的值组成一个新字符串或数组，如何处理？

解决：

let extractByKey = function(arr,key,resultType='String',separator=',') {
    let resultArr = [];
    arr.map(item => {
        if(item[key]) resultArr.push(item[key]);
    })//遍历数组对象
    if(resultType==='Array') return resultArr;
    else if(resultType==='String')return resultArr.join(separator)
    else throw new Error("resultType无效");
}

4、两个el-table表格（横向可能有滑动）同时展示的情况如何控制两个表同时滚动

问题：

解决：

样式：

template中：  

解释：

给表格设定最小的宽度，外侧包一层div，对div加横向滚动的样式，这样就可以实现两个表格的同时横向滚动

实现效果：

特殊情况（需左列固定）：

表格如果需要进行左列的固定，即横向数据特别多的情况之下左列又需要固定，就不能采取上面的做法，例如下面的情况需要固定。

 特殊情况解决：

思路：只需要对两个表格的dom节点进行监听，使上下两个表格同时滚动

方法：

代码：

this.dom1 = this.$refs.tableData.bodyWrapper;
        this.dom2 = this.$refs.tableData1.bodyWrapper;
        // this.dom1 = document.getElementsByClassName(
        //   "el-table__body-wrapper"
        // )[0];
        // this.dom2 = document.getElementsByClassName(
        //   "el-table__body-wrapper"
        // )[1];
    /** 表格滚动 */
    listenerScroll() {
      this.dom1.addEventListener("scroll", () => {
        // 横滚
        this.dom2.scrollLeft = this.dom1.scrollLeft;
      });
      this.dom2.addEventListener("scroll", () => {
        // 横滚
        this.dom1.scrollLeft = this.dom2.scrollLeft;
      });
    },

这时候要隐藏掉第一个el-table的滚动条，但找不到滚动条的类名，只需要给第二个el-table写样式（遮盖住滚动条）

.tableData1 {
  margin-top: -12px!important;
  z-index: 2;
}

备注：另一种数据较多情况下，若需两个表格同时竖向滚动，则使用scrollTop即可

特殊情况实现：

5、表格数据特别多的时候用el-table导致页面卡顿

解决：

需要使用umy-ui进行表格渲染

umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库，完美解决表格万级数据渲染卡顿问题

值得一提的是用umy-ui渲染的时候，遇到横向纵向数据都很多的情况，但是又是多表头（单表头不支持虚拟表格），用两种方法进行解决（仅思路）：

(1).使用两个表，通过重写表格样式进行两个表格的滑动联动（不能用div进行包裹，因为数据特别多的情况下dom节点渲染会很多，不会解决页面卡顿问题，采用问题4中特殊情况的相同处理方式）

(2).使用一个表，但是多表头的部分使用数据进行模拟，再进行行列的合并（这样会导致向下滑动的时候表头也会跟着滑动，所以第一种方式更好）

6、 :nth-child()选择指定的某几项进行样式渲染

问题：

重写el-table的样式时，或是其他有多种子元素不同样式时，需要对选定的第几项或某几项的样式进行特殊处理

解决：

/* 选择第n个，n位数字  */
:nth-child(n)
​
选择列表中的偶数标签
:nth-child(2n)
​
选择列表中的奇数标签
:nth-child(2n-1)
​
选择前几个元素
/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}
​
从第几个开始选择
/*【正方向范围】选择从第6个开始的，直到最后  */
:nth-child(n+6){}
​
两者结合使用，可以限制选择某一个范围
/*【限制范围】选择第6个到第9个，取两者的交集*/
:nth-child(-n+9):nth-child(n+6){}
​
选择列表中的倒数第n个标签 n为数字
:nth-last-child(n) 

​例子：（在例子中，注释部分和非注释部分实现效果相同）

7、重写elment-ui样式的时候不起作用

问题：

重写elment-ui样式的时候不起作用

解决：

在重写elment-ui样式的时候，可以给el-table加一个专属的class，而且在写样式的时候不能使用scoped（会失效）­­­

例子：

（此例子中是对el-table的指定单元小格进行样式复写，实际开发中根据具体情况而定）

.day-report-total thead {
  tr:nth-child(1) {
    th:nth-child(2) {
      background: #e2efda !important;
    }
    th:nth-child(3),
    :nth-child(5),
    :nth-child(6),
    :nth-child(7) {
      background: #fce4d6 !important;
    }
    th:nth-child(4),
    :nth-child(8),
    :nth-child(9) {
      background: #fef2cc !important;
    }
  }
  tr:nth-child(2) {
    th:nth-child(-n + 7):nth-child(n + 3) {
      background: #e2efda !important;
    }
    th:nth-child(-n + 18):nth-child(n + 8) {
      background: #fce4d6 !important;
    }
    th:nth-child(-n + 22):nth-child(n + 19) {
      background: #fef2cc !important;
    }
  }
  tr:nth-child(3) {
    th:nth-child(-n + 29) {
      background: #fef2cc !important;
    }
    th:nth-child(-n + 25) {
      background: #fce4d6 !important;
    }
    th:nth-child(-n + 8) {
      background: #e2efda !important;
    }
  }
}

8、判断某一个js对象中含有的键值的个数

问题：

获取js对象中包含多少个对象

解决：

判断对象的keys值个数Object.keys(table).length

Object.keys()接收一个对象作为参数，并返回其所有(自己的)可枚举属性的数组。

例子：

    let table = {
      name: "",
      sex: "",
      age: "",
    };
    console.log(Object.keys(table).length);//3

9、 两个对象的合并Object.assign(a,b)

解决：

var a = {'grandId': '1', 'grandName': '一年级'}
var b = {'clazzId': '2', 'clazzName': '1班'}
let result = Object.assign(a, b)
/**
result = {
 'grandId': '1', 'grandName': '一年级',
 'clazzId': '2', 'clazzName': '1班'
 }
*/

10. 某个元素在数组中的索引值(下标)怎么查？

解决：

indexOf

// 创建数组arr
let arr = [1, 2, 3, 4, 5];
// 得到1在arr数组中的下标0
arr.indexOf(1); // 0

11. 将两个数组组成对象数组的快捷方式

解决：

推荐使用 arr1.push(...arr2)

数组拼接的四种方法：
var a = [1,2,3,4,5,6];
var b=["foo","bar", "fun"];
最终的结果是：
[1,2,3,4,5,6,"foo","bar","fun"]

（1） concat

c=a.concat(b);

c是新数组，此时的内存使用有a b c 三个数组``

（2） 不使用新数组

for(var i=0;i

a.push.apply(a,b) 

a.push.apply(a,b) 

数字转字符串：(1)加空字符串(2)用String()方法

字符串转数字：(1)减0(2)用Number方法

let list1 = "1,11,11,1,1,1,1,1,1,1,1,1,1,1,1";

let arr1 = list1.split(",");

console.log(arr1);

let arr1 = ['1', '11', '11', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1'];

console.log(arr1.join(','));

let a = "abc";a= a.substr(0,a.length-1);console.log(a)

let a = "abc";a= a.substring(0,a.length-1);console.log(a)

let a = "abc";a= a.substring(0,a.lastIndexOf('c'));console.log(a)

  var jsonString = '[{"name":"小猫"},{"name":"小狗"},{"name":"小朋友"}]';

  console.log(JSON.parse(jsonString));

.table-box {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-flow: row;
  .table-box-left {
    flex: 0 0 150px;
  }
  .table-box-right {
    flex: 1;
    overflow: hidden;
    margin-left: -10px;
    z-index: 3;
  }
}