【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先需要了解俩个函数，row-class-name、cell-class-name

这里以cell-class-name单元格样式为例

row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex})/String
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。	Function({row, column, rowIndex, columnIndex})/String

vue el-table 样式,vue.js,前端,javascript,elementui

<el-table
        ref="filterTable"
        :data="applyData"
        :cell-class-name="tableCellClassName"
        style="width: 100%"
        stripe
        :span-method="objectSpanMethod"
        :header-cell-style="{ 'text-align': 'center','background':'#5596F2','color':'#ffffff' }"
        :row-style="{'padding':'5px 0px', 'height': '80px'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" fixed width="50" />
        <el-table-column prop="wdmc" label="测1" width="300" />
        <el-table-column prop="status" label="测2" width="110" />
        <el-table-column label="测3" width="935" style="text-align:left">
          <template slot-scope="scope">
            <el-steps :active="scope.row.active" space="350px" finish-status="success" process-status="process">
              <el-step v-for="item,i in scope.row.SubNode" :key="i" :title="`${item.TaskDesc}：${item.User}`" :status="item.processStatus">
                <template slot="description">
                  <!-- <span v-if="item.TaskDesc != '申请人提交' && item.TaskDesc != '审批通过'">审批意见：{{ item.opinion }}</span><br> -->
                  <span>{{ item.Time }}</span>
                </template>
              </el-step>
            </el-steps>
          </template>
        </el-table-column>
      </el-table>

文章来源地址https://www.toymoban.com/news/detail-819746.html

// 修改样式
    tableCellClassName(cel) {
      // 行中数据满足某个条件时class设置为bordertop
      if (cel.row.isBorder) {
        return 'bordertop'
      } else {
        return 'zcbordertop'
      }
    }

::v-deep .bordertop{
  border-top: 2px solid #409EFF;
  text-align: center;
  padding: 7px 0px;
}
::v-deep .zcbordertop{
  text-align: center;
  padding: 7px 0px;
}

到了这里，关于【前端vue+elemenui】el-table根据表格数据设置整行样式或单元格样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！