前端知識點階段總結

2022-06-08 20:57:24 字數 3514 閱讀 1315

1.不同解析度動態賦值

if (window.innerwidth > 1440)  else 

dialogwidth:""

2.table批量刪除選中行

let rows = this.$refs.tablerefname.getselectallrows();

let ids = ;

rows.foreach(item => ids.push(item.id));

api.delete(ids,response=>{})

3.動態切換元件

4.table元件 寫columns 屬性時render自定義內容

prop: "action",

label: this.$t("noticepage.operate"),

align: "center",

tablewidth: 260,

render: (createelement, params) => ,

on: }},

"編輯"

)]);

}}

5.日期元件

-日期限制

pickerbegindatebefore: 

}},pickerbegindateafter:

}}

6.拖拽

7.新增和更新調同乙個元件時的判斷

if (this.title == "新增") );

} else );

}dialogclose()

8.foreach

schedulinglisttemp.foreach((element) => ;

temp.patrolpname = item[0].name;

temp.patrolpnameshow =

item[0].name + "(" + item[0].personno + ")";

temp.patrolpeopleorganizetion = item[0].deptname;

temp.patrolroutetext = element.patrolroutetext;

temp.patrolbegintime = element.patrolbegintime;

temp.patrolendtime = element.patrolendtime;

temp.patroluserid = element.patroluserid;

temp.patrollineid = element.patrollineid;

_this.schedulinglist.push(temp);

} else ;

temp2.patrolpname = "";

temp2.patrolpnameshow = "";

temp2.patrolpeopleorganizetion = "";

temp2.patrolroutetext = element.patrolroutetext;

temp2.patrolbegintime = element.patrolbegintime;

temp2.patrolendtime = element.patrolendtime;

temp2.patroluserid = element.patroluserid;

temp2.patrollineid = element.patrollineid;

_this.schedulinglist.push(temp2);

}});

9.新增和更新調同乙個元件時的判斷

if (this.title == "新增") );

} else );

}dialogclose()

10.獲取當前時間

getcurrentdate () 

if (day < 10)

if (hour < 10)

if (minute < 10)

if (second < 10)

var nowdate =

year +

"-" +

month +

"-" +

day +

" " +

hour +

":" +

minute +

":" +

second;

return nowdate;

}

11.明天

var tomrrowday = new date(

new date().setdate(new date().getdate() + 1)

).format("yyyy-mm-dd 00:00:00");

12.元件強制重新整理技巧

在實際開發過程中經常會遇到動態取值之後vue元件不能重新整理的問題,解決辦法就是利用v-if,改變狀態,強制重新整理

在要重新整理的元件上定義v-if=」hackreset」

v-if="hackreset"

data裡定義變數

hackreset: true

在需要重新整理的位置加上重新整理**

this.hackreset = false;

this.$nexttick(() => );

13.匹配拼接

for (var i = 0; i < _this.patrolpeople.length; i++) 

}userid = useridtemparray.join(",");

if (userid === "")

14.object物件取key和value

licensen = object.keys(row.action.licensenumbermap);

statusn = object.values(row.action.licensenumbermap);

15.table中列值動態賦樣式

根據每一列alert0show,alert1show,alert3show的值來確定顯示哪個圖示

根據每一列patrolalarm的值來設定文字的樣式 (動態賦class,class裡定義樣式)

}

16.去重

listunique(array) 

return r;

}unique(arr)

}return hash;

}//陣列去重

unique:function(arr){

for(var i=0; i17.判斷是否為數字型別

!(row.leader instanceof number)

前端知識點總結(四)

css篇 5.visiility中有個collapse屬性的作用?用在 中,隱藏一行或一列,並會釋放空間,chrome除外。6.出現浮動的原因,怎麼清除浮動?乙個盒模型設定類浮動,導致父級物件不能被撐開,這樣就產生類浮動,需要清除浮動。清除浮動方法 計算子容器高度 新增clear both 父級 o...

前端開發知識點總結

很多時候我們會有下面的場景,如下圖中所顯示的那樣。點選1區域 從圖上看1區域包含2區域 和2區域跳轉不同的鏈結。正常的 結構應該是 但是上面的 瀏覽器的編譯結果是下面這樣 很明顯可以發現,瀏覽器的渲染結果並不是我們想要的結果。那麼是為什麼呢?根據 w3c 規範,a 標籤是不是巢狀 a 標籤的。如果出...

前端知識點

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 知識點 ul li 中預設選擇class active firstli rem...