关于vue中slot-scope的使用

使用场景

在开发中我们遇到表格组件时，往往需要根据状态对某一行的数据进行不同的展示，这是我们需要对表格的某一行进行操作，此时就可以使用vue为我们提供的slot-scope（作用域插槽）

使用方法

关于vue2中的写法可以参考以下博客
点击查看

写vue2中的 slot-scope=‘scope’ 会出现以下报错信息
slot-scope are deprecated
PS:在vue3中该功能已经废弃

可以尝试用以下方法解决报错

<template>
 <div class="main">
     <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
    <el-table-column prop="status" label="Status">
        <template #default="scope">
           {{ scope.row.status == 1
                ? "待办"
                : scope.row.status == 2
                ? "处置中"
                : scope.row.status == 3 
                ? "完成" : '任务失败'}}

        </template>
    </el-table-column>
  </el-table>
 </div>
</template>

<script lang="ts" setup>
interface User {
  date: string
  name: string
  address: string
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: Array<any>
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const tableData: Array<any> = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    status: 1
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    status: 2

  },
  
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    status: 3

  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    status: 4

  },
]
</script>

<style>
.main{
    width: 800px;
    height: 1000px;
    position: fixed;
    left: calc(50% - 400px);
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

注意：#default为插槽的缩写 default可以随意起变量名