【vue 项目】Element-button 停用/启用前端接口处理

最终效果图

html

状态： 0 启用， 1停用

 :formatter="statusType"

对于后端定义的状态码或者数字标识，前端拿到后不能直接使用，需要在前端转换其为对应的内容，用到formatter格式化
如，从后端接收数字标识0、1，需将其转换为启用、已停用
下方在JS代码中通过statusType()方法实现

 slot-scope="scope"

为方便操作时拿取到表格的行数

 @click="stopUsing(scope.row)"

停用/启用操作绑定事件，同时传递该行行数，以便获取该行id

 <span v-if="scope.row.accountStatus === 0">停用</span>
 <span v-else>启用</span>

当后端传回值为0，状态为启用，则进行停用操作

:disabled="scope.row.accountStatus === 1"

当后端传回值为1，状态为禁用，则不能进行编辑操作，将编辑按钮禁用

JS

引入停用/启用api

import {
    switchAccountStatus } from '@/api/account'

数字标识转换

// 状态
    statusType(row, column) {
   
      const status = row