vue+el_table修改单列背景颜色

我们在开发中，如果遇到给表格单独一列添加样式该怎么做呢

1.我们在模板中添加el-table这个组件
 

  <el-table :data="data" style="width: 100%;border:1px solid #31724f" border :cell-style="colunmStyle"
                :header-cell-style="{ background: '#598332', fontSize: '14px', color: '#fff', borderColor: 'rgb(5,50,5)', textAlign: 'center' }"
                :span-method="objectSpanMethod">
                >
                <el-table-column prop="null" label="">
                </el-table-column>
                <el-table-column prop="zhibiao" label="指标">
                </el-table-column>
                <el-table-column prop="danwei" label="单位">
                </el-table-column>
                <el-table-column prop="edingzhi" label="额定值">
                </el-table-column>
</el-table>

2.在el-table中增加 :cell-style='colunmStyle'

3.在methods增加这个方法

// 更改第一列背景颜色类
  methods: {
    colunmStyle({ row, column, rowIndex, columnIndex }) {
      // { borderColor: '#255730', fontSize: '14px', textAlign: 'center', fontWeight: '700', color: '#000' }
      //第一列背景色
      if (columnIndex == 0) {
        return "background:#96c06b;color:#fff;font-weight:700;textAlign:center;fontSize: 16px;borderColor: #255730";
      } else {
        return "color:#000;font-weight:700;textAlign:center;fontSize: 14px;borderColor: #255730";
      }
    },
  },

row:每一行的数据

colunm：每一列的数据

rowIndex：行数下标从0开始

colunmIndex:列数下标从0开始

这样就可以啦，请看示例图：