vue的表格操作之锁定解锁存入拒绝

最新推荐文章于 2022-06-08 11:23:16 发布

原创最新推荐文章于 2022-06-08 11:23:16 发布 · 550 阅读

CC 4.0 BY-SA版权

本文介绍了一段关于使用Element UI表格组件展示状态与操作列，通过字典查询动态设置状态颜色，并实现根据不同状态执行锁定、解锁、存入和拒绝操作的示例。展示了如何结合API获取状态字典并应用于前端界面的权限控制。

<el-table-column label="状态" align="center" prop="status"  >
  <template slot-scope="scope">
    <span
      :style="{color: (status = statusOptions[parseInt(scope.row.status)]).color}"
    >{{ status.dictLabel }}</span>
  </template>
</el-table-column>



<el-table-column label="操作" align="center" class-name="small-padding fixed-width " fixed="right" width="180px">
  <template slot-scope="scope">
    <el-button
      size="mini"
      type="text"
      v-if="scope.row.status == 0"
      icon="el-icon-lock"
      @click="handleLock(scope.row)"
      v-has-permi="['pay:payAgentRechargeAccountLog:lock']"
    >锁定
    </el-button>
    <el-button
      size="mini"
      type="text"
      v-if="scope.row.status == 1"
      icon="el-icon-unlock"
      @click="handleUnlock(scope.row)"
      v-has-permi="['pay:payAgentRechargeAccountLog:unlock']"
    >解锁
    </el-button>
    <el-button
      size="mini"
      type="text"
      style=" color: #5FB878"
      v-if="scope.row.status == 1"
      icon="el-icon-circle-check"
      @click="handleWithdraw(scope.row)"
      v-has-permi="['pay:payAgentRechargeAccountLog:artificial']"
    >存入
    </el-button>
    <el-button
      size="mini"
      type="text"
      style=" color: #FF5722"
      v-if="scope.row.status < 2 || scope.row.status == 4"
      icon="el-icon-circle-close"
      @click="handleRefused(scope.row)"
      v-has-permi="['pay:payAgentRechargeAccountLog:refused']"
    >拒绝
    </el-button>
  </template>
</el-table-column>

this.getDicts("recharge_status").then(response => {
  this.statusOptions = response.data;
});

公用方法：

// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
  return request({
    url: url.platformWeb + '/system/dict/data/type/' + dictType,
    method: 'get'
  })
}