<el-table-column v-if="this.queryParams.type=='xzfc'? true:false" label="审批状态" align="center" prop="submitStatus" > <template slot-scope="scope"> <span v-if="scope.row.submitStatus == 1">待审批</span> <span v-if="scope.row.submitStatus == 2">已通过</span> <span v-if="scope.row.submitStatus == 3">已驳回</span> </template> </el-table-column>
时间: 2024-01-03 16:37:32 浏览: 32
这段代码是一个基于Element UI的表格列定义,根据条件判断是否显示该列。具体解析如下:
`<el-table-column v-if="this.queryParams.type=='xzfc'? true:false" label="审批状态" align="center" prop="submitStatus">`
这行代码表示当`this.queryParams.type`等于'xzfc'时,才会渲染这个表格列。`label`属性用于设置列的标题为"审批状态",`align`属性用于设置列中内容的对齐方式为居中,`prop`属性指定了列对应的数据字段为"submitStatus"。
`<template slot-scope="scope">`
这行代码表示使用Vue.js的插槽功能,定义一个作用域插槽,用于定制表格列中每一行的内容。
`<span v-if="scope.row.submitStatus == 1">待审批</span>`
这行代码表示如果当前行的"submitStatus"字段的值等于1,则显示"待审批"文本。
`<span v-if="scope.row.submitStatus == 2">已通过</span>`
这行代码表示如果当前行的"submitStatus"字段的值等于2,则显示"已通过"文本。
`<span v-if="scope.row.submitStatus == 3">已驳回</span>`
这行代码表示如果当前行的"submitStatus"字段的值等于3,则显示"已驳回"文本。
通过以上代码,可以实现一个根据条件判断是否显示并根据数据字段值显示不同文本的表格列。