usersview页面

  <div class="user">
    <el-row>
      <el-button type="primary" round @click="drawer = true"
        >添加用户</el-button
      >
    </el-row>
    <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction">
      <span>wolaila</span>
    </el-drawer>
  <el-table :data="tableData">
    <!-- el-table-column组件 表格中的数据 是数组对象tableData中的属性date所对应的值
    比如 date属性的值对应的2016-05-02 -->
    <!-- 表头标题 是由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 axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      direction:"rtl",  
      drawer:false
    };
  },
  /* 局部的过滤器 */
  // filters:{
  //   getDate(v){
  //     /* 生成当前时间戳的日期对象 */
  //     let oDate = new Date(v);
  //     return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate();
  //   }
  // },
  created() {
    /* 一进入页面调用获取用户数据接口 */
    this.getTableDate();
  },
  methods: {
    getTableDate() {
      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) => {
          this.$message.error(err);
        });
    },
  },
};
</script>

mixin页面

    methods: {
        createRouteFn: function () {
            let arrRoute = JSON.parse(localStorage.arrRoute);
            /* 循环路由数组 动态添加路由 */
            arrRoute.forEach((v) => {
                /* 我们尽量使用v.children[0].path 原因是我们的路径名用的是子路由的 */
                /* 如果我们直接写死v.children[0].path 会导致只有一个子路由路径被动态添加了
                        如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由
                        能够被动态的添加 */
                v.children.forEach((r) => {
                    this.$router.addRoute("index", {
                        path: r.path,
                        name: r.path,
                        meta: {
                            title: v.authName,
                            subTitle: r.authName,
                        },
                        /* 把名字改成我们页面的名称 例如CategoriesView.vue */
                        component: () =>
                            import(
                                `@/views/${r.path.substring(0, 1).toUpperCase() + r.path.substring(1)
                                }View.vue`
                            ),
                    });
                });
            });
        }
    },
}