vue2后台管理列表，给操作按钮加一个动态的颜色的类名

加一个动态的类名控制颜色

<el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleAddChild(scope.$index, scope.row)"
                >添加子类</el-button
              >
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                @click="handleSonEdit(scope.$index, scope.row)"
                >编辑子分类</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除分类</el-button
              >
              <!-- 新加的是否进入商城 -->
              <el-button
                size="mini"
                :class="getButtonClass(scope.row)"
                @click="handleOpenClose(scope.$index, scope.row)"
                >{{ getStatusText(scope.row) }}
              </el-button>
              <!-- 新加的是否进入首页商城 -->
              <el-button
                size="mini"
                :class="getButtonShouClass(scope.row)"
                @click="handleShouOpenClose(scope.$index, scope.row)"
                >{{ getShouStatusText(scope.row) }}
              </el-button>
            </template>
          </el-table-column>

  methods: {
    
    // 确定进入首页商城按钮类的方法
    getButtonShouClass(row) {
      if (row.isNewSupermarket == "1") {
        return "red-button"; //使按钮变成红色的类
      } else if (row.isNewSupermarket == "0" || row.isNewSupermarket == null) {
        return "";
      }
    },
}

<style>

/* 商城的按钮的动态类名的设置 */
.red-button {
  background-color: rgb(249, 112, 112);
  color: white; /* 可选：如有需要可更改文本颜色 */
  /* 根据需要添加其他样式 */
}
</style>