1.渲染函數 Render
render: function (createElement,context) {
return createElement('span', '替代的文字內容');
}
render函數提供兩個參數：
a）createElement 函數：具體參數見官網文檔
https://cn.vuejs.org/v2/guide/render-function.html#%E8%99%9A%E6%8B%9F-DOM
b）context 參數，官網解釋如下：
context 意爲上下文，在表格中，獲取的內容則是每一行的數據
c）使用案例：
案例1：1 代表 已完成，2 代表 未完成，類別顯示應爲“已完成 ” 或 “未完成 ”，後臺返回的是1或 2，此時需要對列的數據顯示進行判斷，可以使用 render 函數
var columns1=[
...
{
title:'表頭標題',
key:'bt',
render: function (createElement,context) {
if(context.row.bt=='' || context.row.bt==null){
return createElement('span', ''); //判斷表格內容爲空情況
}else{
return createElement('span', context.row.bt=='1' ? '第一種情況': '第二種情況'); //不爲空情況的顯示文字
}
},
width:100
},
...
]
案例2：表格中的數據有html標籤，需要對數據格式進行轉換，需要用到createElement 函數 參數中的DOM屬性
var columns1=[
...
{
title:'表頭標題',
key:'bt',
render: function (createElement,context) {
return createElement('span', { domProps:{innerHTML:context.row.bt}} ); //對帶有html標籤的文字轉換
},
width:100
},
...
]
2.Tab選項卡的使用
需要注意幾點：
a）@on-click 事件是在 Tabs 標籤上的，並且默認返回的爲name值，可以通過綁定name值來確定切換到哪個選項卡
b）另一種用法：例如每個選項卡下的內容對應的都是 table ，則可以把 table 單獨拿出來，共用一個 table，通過 tab 的 name值來判斷 table 裏的數據顯示
<Tabs @on-click="changeTab($event)">
<Tab-Pane label="已選"></Tab-Pane>
<Tab-Pane v-for="item in tablist" :key="item.id" :label="item.xkfsmc" :name="item.xkfsdm">
</Tab-Pane>
</Tabs>
3.數值比較
a）文本框獲取的爲字符型，想要對輸入的數值做比較，需要在判斷時用 Number(val) 來轉換成數值型
if(Number(val.jfs) ==0 || Number(val.jfs) < 0){
self.$Message.error('請填寫正確的積分');
return ;
}
b）對填入的數值，需要判斷幾種情況：
1）不爲空；
2）爲0 或 小於 0 ；
3）大於限定的值；
if(val.jfs =='' || val.jfs == null ){
self.$Message.error('請填寫積分');
return ;
}
else if(Number(val.jfs) ==0 || Number(val.jfs) < 0){
self.$Message.error('請填寫正確的積分');
return ;
}
else if(Number(val.jfs) > Number(self.xkgzszOne.jfxs)){
self.$Message.error('超出可選積分');
return ;
}
4. 時間比較
通過時間比較，來判斷當前功能按鈕是否可用
a）通過 new Date() 獲取當前時間 或 轉換成標準時間，然後使用 getTime() 來把時間轉換成數值，方便比較
var curTime = (new Date()).getTime();
var timeS= (new Date(startTime)).getTime();
var timeE= (new Date(endTime)).getTime();
console.log(new Date()); // Wed Mar 18 2020 22:31:17 GMT+0800 (中國標準時間)
console.log(curTime); // 1584541877493
b）對於表格內的按鈕，可以使用三目運算符來判斷是否禁用
<i-button @click="cz(handle.row)" :disabled="new Date().getTime() > new Date(handle.row.ktxkkssj).getTime() && new Date().getTime() < new Date(handle.row.ktxkjssj).getTime() ? false : true ">禁用</i-button>