如果我给行内加一个按钮，点击或者关闭改变行内颜色

我有一个这样的操作，（如果有更好的操作也可以），当我点击这个开关的时候，能否判断是开启还是关闭状态，且如果是关闭状态的话，需要改变这行的颜色，如果为开启则没有任何操作，因为我不会写，所以这个按钮也可以无视，但是要求是不变的

没写过，所以也不知道我的这种是否正确

谢谢各位，已经可以了

给el-switch加个监听方法，然后根据v-model的值去控制这行的颜色

swich 有对应的onchange事件，传值将 变更开关状态，刷新table，根据开关状态判断当前行是否需要显示对应颜色

推荐你参考下这个案例

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>

这个表格的数据都是从后台获取来的；
去判断 el-switch 开关的状态，去改变当前行的颜色；
案例

    <div class="shop-modal-content">
        <el-table :row-class-name="tableRowClassName" class="marketing-table-style-1" :data="gridData" :header-cell-style="{background:'#2D2F3F',color:'#FFFFFF'}">
          <el-table-column align="center" property="area" label="省区"/>
          <el-table-column align="center" property="target" label="门店执行目标"/>
          <el-table-column align="center" property="number" label="门店执行数"/>
          <el-table-column align="center" property="implementation" label="执行率"/>
          <el-table-column align="center" property="acceptanceNum" label="合格执行店数"/>
          <el-table-column align="center" property="percent" label="合格率"/>
        </el-table>
      </div>

   methods: {
      // 关闭窗口
      close(created) {
        this.$emit('close', created)
      },
      handleClose() {
        this.$emit('update:visible', false)
      },
      // 修改条纹颜色
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 !== 0) {
          return 'light-row'
        } else {
          return 'aterrimus-row'
        }
      }
    }

  .el-table {
    /deep/ .light-row {
      background: #2d2f3f;
    }
    /deep/.aterrimus-row {
      //深黑
      background: #1a1b26;
    }
  }