可以使用Vue和Element UI来实现该需求。首先需要使用el-table组件来展示表格数据,然后使用el-table-column组件来定义表格的列。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="status" label="状态">
      <template slot-scope="scope">
        <span v-if="scope.row.status === 1">待审核</span>
        <span v-if="scope.row.status === 2">通过</span>
        <span v-if="scope.row.status === 3">驳回</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button v-if="scope.row.status === 1" type="primary" size="mini" @click="approve(scope.row)">同意</el-button>
        <el-button v-if="scope.row.status === 1" type="danger" size="mini" @click="reject(scope.row)">驳回</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', status: 1 },
        { name: '李四', status: 2 },
        { name: '王五', status: 3 },
      ]
    };
  },
  methods: {
    approve(row) {
      // 同意操作逻辑
    },
    reject(row) {
      // 驳回操作逻辑
    },
  },
};
</script>

上述代码中,tableData数组里面包含了要显示的表格数据,status字段表示状态。在el-table-columnslot-scope中,可以通过scope.row获取到当前行的数据。使用v-if指令来判断状态的值,如果满足条件则显示相应的内容或按钮。

对于状态为待审核的行,显示同意和驳回两个按钮,并绑定对应的点击事件。对于状态为通过或驳回的行,不显示按钮。

approvereject方法中,可以编写同意和驳回操作的逻辑。根据row参数获取当前行的数据,然后进行相应的处理。

提供一个表用vue和element ui来显示其中有一列为状态分别有三个值为123如果值=1时将待审核赋值给他如果等于2时将通过赋值给他如果等于3时将驳回赋值给他在操作这一列如果状态里面的值为待审核就将同意和驳回两个按钮显示如果值为同意或者驳回就将同意和驳回两个按钮隐藏

原文地址: https://www.cveoy.top/t/topic/i91o 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录