tjshop/shop/static/manager/src/components/page/ManageUser.vue

<template>
    <div>
        <el-button type="primary" @click="goAddMUser">添加管理用户</el-button>
        <el-table :data="items">
            <el-table-column label="用户名称" prop="uname"></el-table-column>
            <el-table-column label="用户手机号" prop="uphone"></el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <template v-if="scope.row.status === 1">
                        <p class="online">启用</p>
                    </template>
                    <template v-else>
                        <p class="offline">禁用</p>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="创建者" prop="cuname"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 0">
                        <el-button type="success" @click="setStatus(scope.row)">启用</el-button>
                    </template>
                    <template v-else>
                        <el-button type="danger" @click="setStatus(scope.row)">禁用</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    getMUsers: function() {
      this.$http.queryAllMUsers({}, this).then(res => {
        if (res.code == 0) {
          this.items = res.obj
        }
      })
    },
    setStatus: function(row) {
      var status = row.status === 1 ? 0 : 1
      this.$http
        .setMUserStatus({ id: row.id, status: status }, this)
        .then(res => {
          if (res.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            row.status = status
          }
        })
    },
    goAddMUser () {
        this.$router.push("/addManageUser")
    }
  },
  mounted: function() {
      this.getMUsers();
  }
}
</script>
<style>
.online {
  color: #67c23a;
}
.offline {
  color: #f56c6c;
}
</style>