quasar UI和vue3根据列名的值改变整行的颜色

第一步：因为quasar里面没有q-tr的定义，所以需要用到q-td

写所有列名个数的插槽，使用颜色更换的方法     

<template v-slot:body-cell-定义列名的name="props">

          <q-td :style="returnColor(props.row.定义列名的field)"  :props="props">

              {{props.value}}                                 

          </q-td>

        </template>

第二步：定义一个更换颜色的函数

function returnColor (val) {

      if (val === '值') { return 'background-color:skyblue' }

      if (val === '值') { return 'background-color:lightpink' }

      if (val === '值') { return 'background-color:lightgreen' }

else { return 'background-color:lightyellow' }

    }

第三步：在return方法里面调用returncolor