4.5

获取数据和抽屉页面

< template>

< div class="users">

< el-row>

< el-button type="primary" round @click="drawer=true">添加用户< /el-button>

< el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :wrapperClosable="false"> <AddUser @addok="addok"/>

</el-row

< !--el-table组件 需要给data属性动态的传递一个数组对象 tableData -->

< el-table :data="tableData" style="width: 100%">

< !-- el-table-column组件 表格中的数据是由tableData中的属性date所对应的值-->

< !-- 表头数据 是由label属性来传递的 width属性是表示表头字段的宽度，不给宽度就自适应表格-->

< el-table-column  label="创建日期">

  < template slot-scope="scope"><!-- 通过这个实现日期显示 -->
  
    < div>{{scope.row.create_time|getDate}}</div>
  < /template>
< /el-table-column>
			< el-table-column prop="email" label="电子邮箱"> </el-table-column>
			< el-table-column prop="mobile" label="手机号"> </el-table-column>
			 < el-table-column prop="role_name" label="角色名称" ></el-table-column>
			< el-table-column prop="username" label="用户名"></el-table-column>
		</el-table>
  </div>

< /template>

< script>

import AddUser from "@/components/AddUser.vue"

import axios from "axios";

export default { name:"UsersView", components:{ AddUser },

data() { return { tableData: [], direction: 'rtl', drawer:false, };

},

created() { this.getTableData(); },

methods: {

/* 当子组件添加数据成功的时候触发的方法 */
addok(){

  /* 重新获取用户数据 */
  this.getTableData();
  
  /* 关闭抽屉 */
  setTimeout(()=>{
  
    this.drawer=false;
    
  },600)
},

getTableData() {
  axios
    .get("地址", {
      /* 请求头 */
      headers: {
        "Authorization": localStorage.token,
      },
      /* 必传的请求参数 */
      params: {
        pagenum: 1,
        pagesize: 5,
      },
    })
    .then((res) => {
      let { data, meta } = res.data;
      /* 当状态尾200表示数据获取成功 */
      if (meta.status == 200) {
        /* 把数据给到tableData数组中 */
        this.tableData = data.users;
      } else {
        /* 如果获取数据有误，给出相应提示 */
        this.$message.error(meta.msg);
      }
    })
    .catch((err) => {
      console.log(err);
    });
},

}, };