欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式

 更新時間：2024年03月01日 08:41:54   作者：小雅痞  
這篇文章主要介紹了Element-UI?el-table對循環(huán)產(chǎn)生的空白列賦默認值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Element-UI el-table對循環(huán)產(chǎn)生的空白列賦默認值

el-table 空白列賦值

對el-table中未傳數(shù)據(jù)存在空白的列賦默認值0。

使用el-table 提供的插槽 slot-scope：{{ row || '0' }}

原數(shù)據(jù)：

圖1

<el-table-column label="集鎮(zhèn)"  :prop=city >
     <template slot-scope="{row}">
         {{ row || '0' }}
       </template>
</el-table-column>

el-table 對循環(huán)產(chǎn)生的空白列賦值

對于循環(huán)產(chǎn)生的列，仍要賦默認值0，可采用以下方式： {{ row[col.city] || '0' }}

原數(shù)據(jù)：

圖2

<template v-for="col in cols">
   <el-table-column :label=col.label>
     <el-table-column label="集鎮(zhèn)" :prop=col.city >
       <template slot-scope="{row}">
         {{ row[col.city] || '0' }}
       </template>
     </el-table-column>
     <el-table-column label="農(nóng)村" :prop=col.village>
       <template slot-scope="{row}">
         {{ row[col.village] || '0' }}
       </template>
     </el-table-column>       
   </el-table-column>
</template>

問題解決：

el-table內(nèi)容為空，設(shè)置默認值 效果

方法一：通過css設(shè)置

/deep/.el-table {
  .cell:empty::before {
    content: "---";
    color: #ccc;
  }
  .is-leaf {
    .cell:empty::before {
      content: "---";
      color: #ccc;
    }
  }
}

方法二：過濾

在el-table-column里使用:formatter

<el-table-column
        prop="caseTypeNames"
        label="類型"
        :formatter="caseTypeNamesFormat"
      >
</el-table-column>

    // 類型格式化
    caseTypeNamesFormat (row) {
      let showProp = null
      row.caseTypeNames ? showProp = row.caseTypeNames : showProp = '---'
      return showProp
    },

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論