title: How to map class to particular row cell in Element UI table based on condition?
body: <pre><code>&lt;el-table :data="confirmedAppointments" highlight-current-row style="width: 100%"&gt;
                    &lt;el-table-column type="index" width="50"&gt;
                    &lt;/el-table-column&gt;
                    &lt;el-table-column prop='token' label="Token" width="180"&gt;
                    &lt;/el-table-column&gt;
                    &lt;el-table-column prop='date'  label="Appoint. date" width="180"&gt;
                    &lt;/el-table-column&gt;
                    &lt;el-table-column prop='ROV' label="ROV" width="180"&gt;
                    &lt;/el-table-column&gt;
                    &lt;el-table-column prop='speciality' label="Speciality" width="180"&gt;
                    &lt;/el-table-column&gt;
                    &lt;el-table-column prop='time' label="Appoint. time" width="180"&gt;
                    &lt;/el-table-column&gt;
                    &lt;el-table-column prop='status' label="Status" class="red" v-bind:class="{ 'green': status == 'Accepted' }"&gt;
                    &lt;/el-table-column&gt;
  
                &lt;/el-table&gt;
  </code></pre>
  
  <p>I'm using Element UI table component mapped with dynamic data. On the last column, I have status showing Appproved or Rejected text. </p>
  
  <p>So how can I set particular class to particular cell based on the cell value. By default, the class should be red, but when status value is Approved, the class should be green.</p>