0
点赞
收藏
分享

微信扫一扫

vue+element 根据状态改变当行字体颜色

看山远兮 2022-03-12 阅读 133

一、使用element中的scoped

            <el-table>
              <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                  <el-button type="text" :style="classObje(row)"  style="font-size: 14px"			                                                                                                                                               
                    >详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
		   classObje(row){
		      if(row.id == '1'){
		        return 'color:red'
		      }
		    },

二、使用element中的cell-style

在这里插入图片描述

   <el-table
      :cell-style="cellStyle"
    >
      <el-table-column label="名称" min-width="120px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.companyName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="id" min-width="120px" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.id}}</span>
        </template>
      </el-table-column>
    </el-table>
  methods: {
    cellStyle({ row }) {
      if (row.id == "1") {
        return "color:red";
      }
    }
   }
举报

相关推荐

0 条评论