如何让elementUI的table中的元素根据排名改变样式

在做后台管理系统时我们经常要对组件库里元素的样式做修改，特别是表格一类的，UI总能出点新花样，像表格按照排行，每一行都要背景色不一样或文字颜色不一样这种（如下图），今天我们来处理类似的问题。 

方法如下：

setTableItem(){
// 必须使用nexTick,确保dom元素渲染完毕
      this.$nextTick(function (){
//获取element-ui的table组件里的相关dom元素集合
              const indexDom=this.$refs.elTable.$el.querySelectorAll('.el-table_1_column_1');// 指定特定元素
// 循环遍历每个dom元素，精准获取到我们要做判断的元素
indexDom.forEach((element,index) => {
// 抛去表格标题元素
  if(index===0){
    return;
  }
  const dom = element.getElementsByClassName('cell')[0];// 必须加下标，因为dom元素下的属性在一个[{}]格式里
  const domText=dom.innerText;// 拿到div里的文字
// 判断指定文字下我们展示什么颜色，或者是直接给元素加class名，方便加背景图之类的操作
switch(domText){
  case '1':
    dom.style.color='red';
    break;
    case '2':
    dom.style.color='blue';
    break;
    case '3':
      dom.style.color='green';
      break;
default:
dom.style.color ='gold';


}
});
  })

    }

<template>
  <div>
    <el-table
    ref="elTable"
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column type="index" label="排名" width='150' align="center"></el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        align="center">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default{
  name:'TableSet',
  data(){
    return{
      tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    }
  },
  mounted() {
this.fetchSomething();
this.setTableItem();
   },

  methods: {
    async fetchSomething() {
      await this.$axios
        .get('toutiao/index?type=guonei&key=acc164890efe6d45761f937a643a091e')
        .then((res) => {
          console.log(res)
        })
    },
    setTableItem(){
      this.$nextTick(function (){
              const indexDom=this.$refs.elTable.$el.querySelectorAll('.el-table_1_column_1');
indexDom.forEach(element => {
  const dom = element.getElementsByClassName('cell')[0];
  const domText=dom.innerText;
switch(domText){
  case '1':
    dom.style.color='red';
    break;
    case '2':
    dom.style.color='blue';
    break;
    case '3':
      dom.style.color='green';
      break;


}
});
      })

    }

  },
}
</script>
<style lang="scss" scoped>

</style>