vue3中table组件插槽最新版本的(#default)插槽写法的用法

使用template中的作用域插槽，它的作用是在外部获取组件内的数据 ,这里是为了获取这一行的数据，我们让slot-scope值为scope，那么由scope.row就可以得到数据了。本文以elementui为例，如图所示：

第一种常见需求，做v-if/else条件判断的用法

  <el-table-column property="status" label="状态" width="150">
                    <template #default="scope">
                        <div v-if="scope.row.status === 'OK'" class="status-text"> {{ '正常' }}</div>
                        <div v-else class="status-text" style="background-color:#D53939;">{{ '异常' }}</div>
                    </template>
   </el-table-column>

效果如下：

第二种常见需求，做三元表达式判断的用法

<el-table-column lable="状态" align="center">
   <template #default="scope">
     <span>{{ scope.row["state"] == 1 ? "正常" : "异常" }}</span>
   </template>
</el-table-column>

<el-table-column label="检查结果" align="center" prop="status">
   <template slot-scope="scope">
     <span>{{scope.row.status==0?'正常':(scope.row.status==1?'异常':'待处理')}</span>
   </template> 
</el-table-column>

第三种需求，在表格中插入图片按钮

<el-table-column fixed="right" label="操作" width="120">
                    <template slot-scope="scope">
                        <img src="../../assets/images.jpg" width="18"
                            @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                    </template>
 </el-table-column>