前端开发踩坑笔记（2022-08）

1、Switch 开关打开/关闭时的值

参数	说明	类型	可选值	默认值
active-value	switch 打开时的值	boolean/string/number	-	true
inactive-value	switch 关闭时的值	boolean/string/number	-	false

例子：

    <el-switch
      v-model="scope.row.status"
      :active-value="1"
      :inactive-value="0"
      :disabled="Number(scope.row.accountId) == 1"
      @change="handleStatusChange(scope.row)"
    ></el-switch>

上面的例子中是修改table中的某一行的状态，账户id为1的时候此行的状态不可修改，active-value和inactive-value的两种书写方式，加冒号的书写方式代表的是当v-model为1（数字）的时候开关打开，为0（数字）的时候开关关闭；不加冒号的书写方式代表当v-model为1（字符串）的时候开关打开，为0（字符串）的时候开关关闭。

2、遮罩层嵌套

el-drawer嵌套el-dialog的bug
当el-dialog关闭之后，el-drawer的遮罩层不消失，导致页面没办法点击
解决：
对Drawer设置：

     :modal-append-to-body="false"
     :append-to-body="true"

对Dialog设置

    :modal-append-to-body="true"
    :append-to-body="true"

官方解释：

正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

引申：外层的遮罩层是否插入到body元素上的这个属性设置成false，令遮罩层插入到外层的父元素上

2.1、Drawer 抽屉

参数	说明	类型	可选值	默认值
append-to-body	Drawer自身是否插入至body元素上。嵌套的Drawer必须指定该属性并赋值为true	boolean	-	false
modal-append-to-body	遮罩层是否插入至body元素上，若为false，则遮罩层会插入至Drawer的父元素上	boolearn	-	true

2.2、Dialog 对话框

参数	说明	类型	可选值	默认值
append-to-body	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	-	false
modal-append-to-body	遮罩层是否插入至 body 元素上，若为false，则遮罩层会插入至Dialog的父元素上	boolean	-	true

3、 [Vue warn]: Error in created hook: “TypeError: e.call is not a function”

这是由于定义了错误的生命周期函数导致的报错。

  created() {
  },//正确写法

4、el-tabs和v-show一起使用造成的问题及解决

场景：el-tabs的tab选项在切换的时候，由于使用v-show来控制界面的显示与隐藏（为了对用户在切换tab之后输入的值进行保留，不在切换tab的时候销毁页面），造成页面出现屏闪的问题，可以将v-if加在el-tabs下的组件中，通过父元素传值的方式控制组件的显示，只有在当前对应tab被打开时才进行组件的展示，但是实际上并未销毁组件（数据保留），只是将子组件的部分
内容进行销毁，当再次渲染时，数据仍保留。

父组件：（部分代码）
<el-tabs v-model="tabActive" @tab-click="tabHandleClick">
		<el-tab-pane label="XX数据" name="1"></el-tab-pane>
		<el-tab-pane label="A设备" name="2"></el-tab-pane>
		<el-tab-pane label="B设备" name="3">
		    <son
		     v-show="tabActive == '3' && tabShow"
		     :tab-active="tabActive">
				</son>
		</el-tab-pane>
</el-tabs>
子组件：（部分代码）
<el-table
   :data="storageList"
   style="width: 100%"
   border
   size="mini"
   v-loading="loading2"
   v-if="tabActive == '3' && tabShow">
</el-table>
在子组件中还需对父组件传递过来的值进行接收：
props: {
    tabActive: {
      type: String,
      default: "",
    },
    tabShow: {
      type: Boolean,
      default: false,
    },
  },

5、对数组对象中相同名称和年龄的相加eggs属性

//数组对象中，如果有相同名称和相同年龄的，将eggs属性相加起来

5.1、 for循环方式

let res = [];
for (let i = 0; i < arr.length; i++) {
    let merged = flase;
    for (let j = 0; j < res.length; j++) {
        if (res[j].name == arr[i].name && res[j].age == arr[i].age) {
            res[j].eggs += arr[i].eggs;
            merged = true;
            break;
        }
    }
    if (!merged) {
        res.push(arr[i]);
    }
}

5.2、 forEach+find方式

let res = [];
arr.forEach(m => {
    let obj = res.find(n => n.name === m.name && n.age === m.age);
    if (obj) {
        obj.eggs += m.eggs;
    } else {
        res.push(m);
    }
});

5.3、reduce+find方式

let res = arr.reduce((acc, cur) => {
    let obj = acc.find(e => e.name === cur.name && e.age === cur.age);
    if (obj) {
        obj.eggs += cur.eggs;
    } else {
        acc.push(cur);
    }
    return acc;
}, []);

5.4、项目开发中的相似案例

项目中的需求：
一个表格中展示的时候name有相同的情况，但是当下方绘制饼状图的时候需要将name相同项目的value属性相加在绘制饼状图时使用

let tableData = [
    {
        name: "第一张",
        value: 1,
    },
    {
        name: "第二张",
        value: 2,
    },
    {
        name: "第一张",
        value: 3,
    },
    {
        name: '第三张',
        value: 4,
    }
];

//第一种方法
let res = tableData.reduce((acc,cur)=>{
  let  obj = acc.find( m=>m.name===cur.name);
   if(obj){
       obj.value +=cur.value
   }else{
       acc.push(cur)
   }
   return acc;
},[])

//第二种方法
let res = [];
tableData.forEach(m=>{
    let obj = res.find(n=>n.name===m.name);
    if(obj){
        obj.value +=m.value;
    }else{
        res.push(m);
    }
})

6、echats隐藏series其中的某条数据

有的时候我们需要数据在tooltip中显示某类数据，但是却不想在图表中显示该线条。
可以用echarts的css样式控制显示隐藏线条而不影响toolTip的面板数据显示。

series: [{
    name: '...',
    type: 'line',
    symbolSize: 0, // symbol的大小设置为0让线的小圆点不显示
    showSymbol: false, // 不显示symbol不显示
    lineStyle: {
        width: 0, // 线宽是0不显示线
        color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
    },
    data: ...
}]

给需要隐藏的那条数据加上上述控制线条样式的代码，可以在legend中删除这条数据对应的legend，这样legend也不会展示此条数据，只有在tooltip显示的时候此数据才会展示。