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

Posted 2022-04-15 在奋斗的大道

效果截图：

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指令 决定按钮的显示隐藏。