Vue核心代码

本文档详细解析Vue项目的UserList.vue组件,包括html结构(面包屑导航、搜索栏、数据列表和分页)、script部分的外部引用、data模块与methods模块,以及对应的css样式。重点探讨Vue如何结合模板、数据和方法实现页面功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 页面代码

路径:xxx/src/views/UserList.vue

1.1 html代码

template标签里内容,一般包括导航栏、搜索栏、数据列表、分页栏
注意:冒号开头的标签属性、v-model的标签属性可以直接引用javascript标签里data中定义的变量

<el-input v-model="formInline.username" placeholder="请输入用户名称"></el-input>
上面标签出现了v-model表示绑定了javascript标签里data中定义的变量formInline的username

<el-table size="small" :data="listData">
上面标签出现了冒号开头的标签属性 :data  表示将列表的数据绑定到了javascript标签里data中定义的变量listData
1.1.1 导航栏(面包屑)

在这里插入图片描述

/**
 * 用户管理菜单——用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    
   </div>
</template>
 
1.1.2 搜索栏(条件查询)

在这里插入图片描述

/**
 * 用户管理菜单——用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索:">
        <el-input
          size="small"
          :clearable="true"
          v-model="formInline.username"
          placeholder="请输入用户名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button> -->
      </el-form-item>
    </el-form>
    
   </div>
</template>
 
1.1.3 数据列表

在这里插入图片描述

<!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading"
      border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="username" sortable label="用户名" width="150"></el-table-column>
      <el-table-column prop="name" label="用户名称" width="150" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createdDate" label="创建时间" width="150">
        <template slot-scope="scope">
          <div>{{scope.row.createdDate|timestampToTime}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="createdBy" label="创建人" width="150"></el-table-column>
      <el-table-column prop="modifiedDate" label="修改时间" width="150">
        <template slot-scope="scope">
          <div>{{scope.row.modifiedDate|timestampToTime}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="modifiedBy" label="修改人" width="150"></el-table-column>
      <el-table-column align="center" label="操作" min-width="80">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" type="primary" @click="editUser(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
1.1.4 分页栏

在这里插入图片描述

<!-- 分页组件 -->
<Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

2 script代码

script标签里的内容,这部分是vue的核心

2.1 导入外部引用
// 请求地址
import { userList, userEdit } from "../../api/userMG";
// 分页组件
import Pagination from "../../components/Pagination";
2.2 数据data模块
export default {
  data() {
    return {
    	listData: [], // 分页查询数据
	}
  }	
}
2.3 方法method模块

vue自定义的方法created

created() {
    // 表示页面加载后第一时间调用的方法,一般用来初始化列表数据
},

用户自定义方法,必须写在method里面

methods: {
    // 获取公司列表
    getdata(parameter) {
      this.loading = true;
      // 调用后端接口
      userList(parameter)
        .then(res => {
          this.loading = false;
            this.listData = res.data;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.page;
            this.pageparm.pageSize = this.formInline.limit;
            this.pageparm.total = res.total;
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("菜单加载失败,请稍后再试!");
        });
    },
}

3 css代码

style标签里的内容

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值