element-ui更改单元格字体颜色

如果script 标签使用了 setup，这个时候 export 是没有必要的，也就是使用了setup 后，就不要再写 export 了，不然会报错“A default export must be at the top level of a file or module declaration” 本来想使用过滤器，但是发现vue3删掉了过滤器filter功能，官方建议：用方法调用或计算属性替换过滤器—— vue3的插槽使用方法发生了改变，# 等同于 slot= ——

在插槽中使用行内样式更改一整列数据颜色

<el-table-column prop="date" label="日期" >
	<template #="scope">
	    <div style="color:#fec632">
	        {
         
  { scope.row.date }}
	    </div>
	</template>
</el-table-column>

使用element-ui中的tag标签

大部分时候表格内的数据需要用不同的颜色标注是因为数据有不同的状态，前辈建议我用element-ui中的标签，tag标签可以自定义按钮的颜色

例子：

<el-table-column prop="status" label="状态" >
        <template #="scope">
          <el-tag
            :color="statusColor(scope.row.status)"
            style="color: #ffffff; border-color: transparent"
            size="mini"
            disable-transitions
          >
            {
         
  { scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>

const statusColor = computed(() => {
  return function (status:string){
    switch(status){
        case "未开始":
            return "#ff4949";
            break;
        case "进行中":
            return "#ffba00";
            break;
        case "已完成":
            return "#5ccb91";
            break;
    }
  }
})

有哪些不合适的地方欢迎指正(●’◡’●)