vue+element 根据状态，显示不同的操作按钮

骑猪看日落 2023-10-10 14:00 8阅读 0赞

效果截图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16][]

VUE 核心功能代码片段

<el-table :data="hrs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
    			<el-table-column type="selection" width="55">
    			</el-table-column>
    			<el-table-column type="index" width="60">
    			</el-table-column>
    			<el-table-column prop="companyName" label="招聘企业" width="120" sortable>
    			</el-table-column>
    			<el-table-column prop="companyPosition" label="招聘岗位" width="100"  sortable>
    			</el-table-column>
    			<el-table-column prop="education" label="学历要求" :formatter="formatEducation" width="100" sortable>
    			</el-table-column>
    			<el-table-column prop="workYear" label="工作经验" width="100" sortable>
    			</el-table-column>
    			<el-table-column prop="salary" label="薪资待遇" :formatter="formatSalary" min-width="120" sortable>
    			</el-table-column>
    			<el-table-column prop="createDt" label="创建时间" min-width="100" sortable>
    			</el-table-column>
    			<el-table-column prop="publisher" label="发布人" min-width="100" sortable>
    			</el-table-column>
    			<el-table-column prop="status" label="状态" :formatter="formatSatatus" min-width="100" sortable>
    			</el-table-column>
    			<el-table-column label="操作" width="240">
    				<template scope="scope">
    					<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
    					<el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status !== 2">发布</el-button>
    					<el-button size="small" @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status !== 2">编辑</el-button>
    					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)" v-if="scope.row.status !== 2">删除</el-button>
    					<el-button type="danger" size="small" @click="handleRevoke(scope.$index, scope.row)" v-if="scope.row.status === 2">撤销</el-button>
    				</template>
    			</el-table-column>
    		</el-table>

总结：通过 v-if指令 决定按钮的显示隐藏。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4083fd145c304c289ca838f353bc8e8c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Zyo5aWL5paX55qE5aSn6YGT,size_20,color_FFFFFF,t_70,g_se,x_16