首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue+ElementUI表格状态区分,row-class-name属性

Vue+ElementUI表格状态区分,row-class-name属性详解

2024-08-10 09:34:29 作者：roongyan92

这篇文章主要介绍了Vue+ElementUI表格状态区分,row-class-name属性,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

通过指定Table 组件的 row-class-name属性

来为Table中的某一行添加 class，表明该行处于某种状态。

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.根据业务需求添加方法（methods中）

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

注意：

row-class-name属性与stripe = true互斥

如果你的表格把stripe 属性设为true，即斑马纹显示，

后又设置了row-class-name属性，那row-class-name的效果不会完全体现，

还是斑马纹，只是斑马纹的颜色变化了，

即row-class-name属性与stripe = true互斥，不能同时存在！！！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。