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

Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解

 更新時間：2024年08月10日 09:34:28   作者：roongyan92  
這篇文章主要介紹了Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

通過指定Table 組件的 row-class-name屬性

來為Table中的某一行添加 class，表明該行處于某種狀態(tài)。

1.在表格組件上綁定row-class-name屬性

        <el-table
          ref="multipleTable"
          :data="tableList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          border
          :key="Math.random()"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            type="selection"
            width="50"
            align="center"
          ></el-table-column>
          <template v-for="item in tableTitle">
            <el-table-column
              :label="item.label"
              :key="item.prop"
              :prop="item.prop"
              min-width="90px"
              align="center"
            ></el-table-column>
          </template>
        </el-table>

2.在樣式中加入背景色

 .el-table .info-row {
    background: #e4e7ed;
  }

3.根據(jù)業(yè)務(wù)需求添加方法（methods中）

tableRowClassName({ row, rowIndex }) {
   if (row.isTop && row.isTop == 1) {
      return "info-row";
   }
   return "";
}

注意：

row-class-name屬性與stripe = true互斥

如果你的表格把stripe 屬性設(shè)為true，即斑馬紋顯示，

后又設(shè)置了row-class-name屬性，那row-class-name的效果不會完全體現(xiàn)，

還是斑馬紋，只是斑馬紋的顏色變化了，

即row-class-name屬性與stripe = true互斥，不能同時存在！?。?/p>

總結(jié)

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

相關(guān)文章

最新評論