element隨筆

時間選擇框el-date-picker和select框數據選不上:

【解決】用v-model="searchData.searchDate"，不能用:model="searchData.searchDate"

Table改變其中某一行的樣式:

【解決】
<el-table>標籤中有一個:row-class-name="getRowClassName"屬性
getRowClassName是一個方法，返回一個class的名稱

getRowClassName({row,rowIndex}){
    if(row.detail == 10 || row.detail == 12){
        return "remind";
    }
}

.el-table .remind {
     color: red;
 }

Table改變某個單元格的樣式:

【解決】<el-table>標籤中有一個:cell-class-name="getVipStatusClass"屬性，getVipStatusClass是一個方法，返回一個class的名稱。

getVipStatusClass({row,column,rowIndex,columnIndex}){
    if(row.status == 1){
        if(columnIndex == 4){
            return "effective";
        }
    }
    if(row.status == 0){
        if(columnIndex == 4){
            return "ineffective";
        }
    }
}

.el-table .effective{
    color: #70B603;
}

.el-table .ineffective{
    color: #AAA;
}