不同状态同时展示不同的操作项

实现一个这样的需求——不同状态同时展示不同的操作项

表格的操作项包括查看、编辑、上线、删除。
操作功能根据干预状态判断：

其中对应状态码

statusOptions: [
    {label: '等待上线', value: 100},
    {label: '上线成功', value: 200},
    {label: '已下线', value: 300},
    {label: '已删除', value: 400},
    {label: '上线失败', value: 500},
],

模版中给每个操作项，使用v-if根据不同状态码展示不同的按钮，传入2个参数；第一个参数代表，各个操作按钮；第二个参数代表，不同的状态；

<el-table-column
     fixed="right"
     label="操作"
     width="200"
 >
     <template slot-scope="scope">
         <el-button
             v-if="showBtn('view', scope.row.status)"
             type="text"
             class="btn"
             size="small"
             @click="goDetail(scope.row)"
         >
             查看
         </el-button>
         <el-button
             v-if="showBtn('edit', scope.row.status)"
             type="text"
             size="small"
             class="btn"
             @click="edit(scope.row)"
         >编辑</el-button>
         <el-button
             v-if="showBtn('publish', scope.row.status)"
             type="text"
             size="small"
             class="btn upBtn"
             @click="handlePublish(scope.row)"
         >上线</el-button>
         <el-button
             v-if="showBtn('offline', scope.row.status)"
             type="text"
             size="small"
             class="btn offBtn"
             @click="handleOffline(scope.row)"
         >下线</el-button>
         <el-button
             v-if="showBtn('delete', scope.row.status)"
             type="text"
             size="small"
             class="btn delBtn"
             @click="del(scope.row)"
         >删除</el-button>
     </template>
 </el-table-column>

方法中

// 按钮展示
 showBtn(action, status) {
      if (action === 'view') {
          return [100, 200, 300, 400, 500].includes(status);
      }
      else if (action === 'edit') {
          return [100, 300, 500].includes(status);
      }
      else if (action === 'delete') {
          return status === 100;
      }
      else if (action === 'publish') {
          return [100, 300, 500].includes(status);
      }
      else if (action === 'offline') {
          return status === 200;
      }
 },

所有状态都有查看

当状态为100、300、500时（待上线、已下线、上线失败）可以为编辑或者上线

当状态为100时（待上线）可以有删除

当状态为200时（上线成功）可以有下线