#星计划手把手带你理解前端代码篇之列表篇原创

前端歌谣

发布于 2023-12-18 13:02

浏览

0收藏

前言

大家好我是歌谣首先我们日常开发中会遇到各式各样的项目有些技术栈都是大家不会的
特别对于别人已经写好的项目我们要做的就是不要慌不要慌

第一步调整心态不要慌

不要慌是前提

第二步安装依赖

安装依赖看看项目所涉及的技术栈package.json

element2+vue2+avue
1.

第三步找出相似页面开始开发

page-header-tool

开始逐行开发这个组件已经说过了其中的所有属性在变量data中国声明好
modBtns和max即可

    <page-header-tool title="销售订单" :btns="modBtns" :max="2">
    </page-header-tool>
1.
2.

此时页面的上沿就显示出来了

#星计划手把手带你理解前端代码篇之列表篇-鸿蒙开发者社区

咱们继续进行avue-crud

 <avue-crud
      class="avue-affixed avue-new-table"
      ref="crud"
      :option="tableOption"
      :table-loading="listLoading"
      :data="tableData"
    >
    </avue-crud>
    <!-- 
        :page.sync="page"
      :data="tableData"
        @current-change="currentChange"
      @size-change="sizeChange"
      @selection-change="selectionChange"
      @search-change="searchChange"
      @filter-change="filterChange" -->
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

对于注释的部分的方法我们先不添加先看看非注释区域有什么作用

tableOption

tableOption是从外部引入的变量直接模仿着创建一个同名的目录

import { tableOption } from "./const/options";
1.

接着页面的表头和搜索就出现了

#星计划手把手带你理解前端代码篇之列表篇-鸿蒙开发者社区

tableData

接着就是渲染表格的数据tableData数据的获取一般从created出发

created() {
    this.loadingList();
  },
1.
2.
3.

继续找方法loadingList

   loadingList(typeCode) {
      this.page.currentPage = 1;
      this.getList();
    },
1.
2.
3.
4.

这个时候就可以加一个变量了page

继续找方法getList

  getList() {
      this.listLoading = true;
      const params = deepClone(this.searchCondition);
      fetchMesMaterialMasterList({
        current: this.page.currentPage,
        size: this.page.pageSize,
        ...params,
      })
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

1添加变量listLoading
2添加变量searchCondition
3引入deepClone方法

import { deepClone} from '@/util/util';
1.

4创建文件调用方法引入这边代码先做注释可以不注释后面再研究

import {fetchMesMaterialMasterList} from './api/index';
1.

这样页面就又数据了

继续加条件

1page的变量加进去

页面又分页了

#星计划手把手带你理解前端代码篇之列表篇-鸿蒙开发者社区

currentChange

@current-change="currentChange"
1.

 currentChange(val) {
      this.page.page = val;
      this.page.currentPage = val;
      this.getList();
    },
1.
2.
3.
4.
5.

sizeChange页面条数变化

 sizeChange(val) {
      this.page.limit = val;
      this.page.pageSize = val;
      this.getList();
    },
1.
2.
3.
4.
5.

searchChange搜索条件变化

 async searchChange(form, done) {
      this.searchCondition = form;
      console.log(form);
      await this.getList();
      done();
    },
1.
2.
3.
4.
5.
6.

filter-change

#星计划手把手带你理解前端代码篇之列表篇-鸿蒙开发者社区

继续加方法

 @selection-change="selectionChange"
1.

 selectionChange(val) {
      this.selectionData = val;
    },
1.
2.
3.

加变量 selectionData

#星计划手把手带你理解前端代码篇之列表篇-鸿蒙开发者社区

继续添加组件

<template slot-scope="scope" slot="menu">
        <table-column-btns :btns="tableBtns" :scope="scope"></table-column-btns>
      </template>
1.
2.
3.

添加按钮数据

   tableBtns: [
        {
          name: '查看',
          // icon: 'icon-search_line',
          click: this.handleLook
        },
        {
          name: '编辑',
          // icon: 'icon-edit_line',
          click: this.handleUpdate
        },
        // {
        //   name: '删除',
        //   // icon: 'icon-clear_line',
        //   click: this.handleDelete
        // }
      ],
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.