vue(*)

最新推荐文章于 2022-03-09 09:09:34 发布

那你多喝点水

最新推荐文章于 2022-03-09 09:09:34 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/weixin_45608577/article/details/118501001

版权

该博客展示了如何使用Vue.js和Element UI组件库来创建用户管理界面，包括表格展示用户信息、新增和编辑用户操作。通过`el-table`组件展示用户ID、姓名、年龄和性别，并提供了查看和编辑按钮。点击编辑按钮，弹出对话框（`el-dialog`）显示`UserDetail`组件，用于编辑用户详细信息。编辑完成后，通过回调函数更新表格数据。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div id="users">
    <div style="float: right">
      <el-button type="text" @click="showDetail(null)">新增</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="sex" label="male"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template v-slot:default="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="showDetail(scope.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <user-detail v-if="dialogVisible" :id="currentId" @callbackForCancle='callbackForCancle' @callbackForSave='callbackForSave'/>
    </el-dialog>
  </div>
</template>

<script>
import UserDetail from './UserDetail.vue';

export default {
    name:'Users',
    components: {
       UserDetail
    },
  data() {
    return {
      tableData: [],
      dialogVisible:false,
      currentId:null
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get("http://localhost:9001/users").then((response) => {
        this.tableData = response.data;
      });
    },
    showDetail(id){
        this.currentId=id
        this.dialogVisible = true
    },
    callbackForCancle(){
        this.dialogVisible = false
    },
     callbackForSave(){
        this.getData()
        this.dialogVisible = false
    },
    handleClick(){

    }
  },

};
</script>

<template>
  <div id="user-detail">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age"></el-input>
      </el-form-item>
    <el-form-item label="性别" prop="sex" style="text-align:left;">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="male">男</el-radio>
          <el-radio label="female">女</el-radio>
        </el-radio-group>
      </el-form-item>
    
      <el-button @click="cancle">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    
    </el-form>
    
  </div>
</template>

<script>
export default {
  name: "UserDetail",
  props:{
      id:String
  },
  data() {
    return {
        ruleForm:{
            
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          age: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
        }
    };
    
  },
  created () {
      this.getData()
  },
    methods: {
    cancle() {
      this.$emit("callbackForCancle");
    },
    save() {
      this.$emit("callbackForSave");
    },
    getData(){
        this.$axios.get("http://localhost:9001/users/" + this.id).then((response)=>{
            this.ruleForm=response.data
        })
    }
  },
};
</script>