若依框架结合---------ElementUI快速入门

灰太狼 2023-09-28 14:03 135阅读 0赞

**目录**

1、什么是ElementUI？

1.1、搭建elementUI脚手架(vue-admin-template)

2.elementUI的table组件,实现列表展示

3.使用pagination实现分页

4. 使用分页+条件查询

5-6. 弹出窗口、消息提示、select下拉框

--------------------

### 1、什么是ElementUI？ ###

Element 饿了么前端出品的一套 基于 Vue 2.0 的桌面端组件库

#### 1.1、搭建elementUI脚手架(vue-admin-template) ####

# Clone project
    git clone https://github.com/PanJiaChen/vue-admin-template.git
     
    # Install dependencies
    npm install
     
    # Serve with hot reload at localhost:9528
    npm run dev
     
    # Build for production with minification
    npm run build
     
    # Build for production and view the bundle analyzer report
    npm run build --report

在执行完npm run dev后发现浏览器自动打开了vue-admin-template登录页面，点击登录，此时模板页面就搭建好了。

打开文件夹vue-admin-template，主要的目录结构如下图所示：

![343c1857ebc44396a0b4b22b3e76f65d.png][]

1.2 项目初始化调整  
1.2.1 关闭语法规范性检查

修改 config/index.js ，将useEslint的值改为false。

此配置作用: 是否开启语法检查，语法检查是通过ESLint 来实现的。

我们现在科普一下,什么是ESLint : ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。如果我们开启了Eslint , 也就意味着要接受它非常苛刻的语法检查，包括空格不能少些或多些，必须单引不能双引，语句后不可以写 分号等等，这些规则其实是可以设置的。作为初学者，最好先关闭这种校验，否则会浪费很多精力在语法的规范性上。如果以后做真正的企业级开发，建议开启。

1.2.2 国际化设置

打开main.js 找到这句代码

import locale from 'element‐ui/lib/locale/lang/en'

我们将en修改为zn-CN  
import locale from 'element‐ui/lib/locale/lang/zh‐CN'

修改后组件都是按照中文的习惯展示

**1.2.3 与easy-mock对接**

(1)修改config下的dev.env.js中的BASE\_API为easy-mock的Base URL

> 1.  ....
> 2.  BASE\_API: '"http://10.211.5.3:7300/mock/5af314a4c612420d0d7650c7"',
> 3.  ....

修改后发现无法登录上vue-admin-templates，原因是修改了BASE\_API，需要在自己的Easy-mock中修改验证

(2)easy-mock添加登陆认证模拟数据 地址: /user/login  
提交方式:post  
内容:

{
      "code": 20000,
      "data": {
        "roles": ["admin"],
        "role": ["admin"],
        "name": "admin",
        "avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
      }
    }

(3)添加返回用户信息url模拟数据 地址:/user/info  
提交方式:get  
内容:

此时又可以登录上vue-admin-template，且成功与自己的easy-mock对接上了。

### 2.elementUI的table组件,实现列表展示 ###

(1)在src/api/下创建gathering.js，书写代码：

import request from '@/utils/request'
    export function addUserSysStore(data) {
      return request({
        url: '/system/store/SwJsStoreadd',
        method: 'post',
        data: data
      })
    }

导入request模块实际上是对ajax的封装(在utils/request.js中)，上述的url和method即为请求的url和method

(2)在views/table中创建 gathering.vue

vue主要分为视图区<template>、逻辑区/代码区<script>(用于控制视图区的显示)

<template>
        <div class="app-container">
            <el-row :gutter="20">
                
                <el-col :span="20" :xs="24" class="tooltup">
                    
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                        label-width="68px">
                        <el-form-item prop="name">
                            <el-input v-model="queryParams.name" id="miaoshu" placeholder="请输入公司名称" clearable
                                style="width: 240px" @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" class="biaoto-buttonchaxuen" @click="handleQuery">查询</el-button>
                            <el-button size="mini" class="biaoto-buttonchuangjian" @click="handlechuangjiang">创建</el-button>
                            <el-button type="danger" class="biaoto-buttonshanchu" @click="handleDelete">删除</el-button>
                            <el-button plain size="mini" class="biaoto-buttondaoru" @click="handleImport"
                                v-hasPermi="['system:user:import']">导入</el-button>
                            <el-button plain size="mini" class="biaoto-buttondaochu" @click="handleExport"
                                v-hasPermi="['system:user:export']">导出</el-button>
                            <el-button plain size="mini" class="biaoto-buttondaochu" @click="daoying"
                                v-hasPermi="['system:user:export']">打印条码</el-button>
                        </el-form-item>
                        <el-form-item class="right-backtools">
                            
    
                            
                            <b>
                                <el-button icon="el-icon-back" size="mini" class="right-buttonback"></el-button>
                            </b>
                            <el-button icon="el-icon-right" size="mini" class="right-buttonback"></el-button>
                            <el-button icon="el-icon-s-tools" size="mini" class="right-buttonback"></el-button>
                        </el-form-item>
                    </el-form>
    
                    <el-table v-loading="loading" :data="userList" :default-sort="{ prop: 'name', order: 'descending' }"
                        style="width:90%;height: 8%;" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50" align="center" />
                        <el-table-column label="公司名称" align="center" key="name" prop="name" sortable />
                        <el-table-column label="公司地址" align="center" key="address" prop="address" locationNum />
                        <el-table-column label="联系人" align="center" key="telPeople" prop="telPeople" sortable />
                        <el-table-column label="联系电话" align="center" key="phone" prop="phone" sortable />
                        <el-table-column label="发票类型" align="center" key="invoiceType" prop="invoiceType" sortable>
                            <template scope="scope">
                                <div>{
       { scope.row.invoiceType == 1 ? "增值税专用发票" : scope.row.invoiceType == 2 ?
                                    "增值税普通发票" : scope.row.invoiceType == 3 ?
                                    "个人普通发票" : scope.row.invoiceType == 4 ? "不开发票" :"发票类型不确定"
                                    }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" align="center" key="ifEnabled" prop="ifEnabled" sortable>
                            <template scope="scope">
                                <div>{
       { scope.row.ifEnabled == -1 ? "启用" : scope.row.ifEnabled == 1 ? "禁用":"状态不确定" }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                            <template slot-scope="scope" v-if="scope.row.id !== 1">
                                <el-button size="mini" type="text" icon="el-icon-edit" class="button-caozuoxougai"
                                    @click="handlexiangqengSelect(scope.row)" v-hasPermi="['system:user:edit']">修改
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete" class="button-caozuoxougai"
                                    @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
                                <el-button size="mini" type="text" icon="el-icon-share" class="caozuoxiangqeng"
                                    @click="handleSelect(scope.row)" v-hasPermi="['system:user:listselect']">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
    
                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" :page-sizes="[2, 5, 10, 15, 20]"
                        class="pagintotal" />
                </el-col>
            </el-row>
    
            
            <el-dialog :title="title1" :visible.sync="open">
                <el-form ref="form" :model="form" label-width="45%" class="chuangjianform">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="公司名称" prop="name">
                                <el-input v-model="form.name" maxlength="30" placeholder="请输入名称" style="width:98%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="联系人" prop="telPeople">
                                <el-input v-model="form.telPeople" maxlength="30" placeholder="请输入联系人" style="width:98%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="公司地址" prop="address">
                                <el-input v-model="form.address" placeholder="请输入公司地址" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="联系电话" prop="phone">
                                <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="出库顺序" prop="skuSort">
                                <el-input v-model="form.skuSort" placeholder="请输入出库顺序" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票账号" prop="invoiceNumber">
                                <el-input v-model="form.invoiceNumber" placeholder="请输入发票账号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="发票地址" prop="invoiceAddress">
                                <el-input v-model="form.invoiceAddress" placeholder="请输入发票地址" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票电话" prop="invoicePhone">
                                <el-input v-model="form.invoicePhone" placeholder="请输入发票电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="发票类型" prop="invoiceType">
                                
                                <el-select v-model="gongyingshangxxweihuleix.invoiceType" placeholder="请输入发票类型">
                                    <el-option v-for="item in fapiaoleix" :key="item.label" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票开户行" prop="invoiceBank">
                                <el-input v-model="form.invoiceBank" placeholder="请输入发票开户行" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="纳税人识别号" prop="invoiceTaxpayerNumber">
                                <el-input v-model="form.invoiceTaxpayerNumber" placeholder="请输入纳税人识别号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="状态" prop="ifEnabled">
                                
                                <el-select v-model="gongyingshangxxweihuleix.ifEnabled" placeholder="请输入发票类型">
                                    <el-option v-for="item in ZhuangTaivalue" :key="item.label" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handleUpdate">确定</el-button>
                    
                </div>
            </el-dialog>
    
            
            <el-dialog :title="title2" :visible.sync="open1">
                <el-form ref="form1" :model="form1" label-width="45%" class="chuangjianform">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="公司名称" prop="name">
                                <el-input v-model="form1.name" maxlength="30" placeholder="请输入名称" style="width:98%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="联系人" prop="telPeople">
                                <el-input v-model="form1.telPeople" maxlength="30" placeholder="请输入联系人" style="width:98%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="公司地址" prop="address">
                                <el-input v-model="form1.address" placeholder="请输入公司地址" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="联系电话" prop="phone">
                                <el-input v-model="form1.phone" placeholder="请输入联系电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="出库顺序" prop="skuSort">
                                <el-input v-model="form1.skuSort" placeholder="请输入出库顺序" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票账号" prop="invoiceNumber">
                                <el-input v-model="form1.invoiceNumber" placeholder="请输入发票账号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="发票地址" prop="invoiceAddress">
                                <el-input v-model="form1.invoiceAddress" placeholder="请输入发票地址" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票电话" prop="invoicePhone">
                                <el-input v-model="form1.invoicePhone" placeholder="请输入发票电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="发票类型" prop="invoiceType">
                                <el-input v-model="form1.invoiceType" placeholder="请输入发票类型" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票开户行" prop="invoiceBank">
                                <el-input v-model="form1.invoiceBank" placeholder="请输入发票开户行" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="纳税人识别号" prop="invoiceTaxpayerNumber">
                                <el-input v-model="form1.invoiceTaxpayerNumber" placeholder="请输入纳税人识别号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    
                    
                </div>
            </el-dialog>
    
            
            <el-dialog :title="title" :visible.sync="open2">
                <el-form ref="form2" :model="form2" label-width="45%" :rules="rules" class="chuangjianform">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="公司名称" prop="name">
                                <el-input v-model="form2.name" maxlength="30" placeholder="请输入名称" style="width:98%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="联系人" prop="telPeople">
                                <el-input v-model="form2.telPeople" maxlength="30" placeholder="请输入联系人" style="width:98%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="公司地址" prop="address">
                                <el-input v-model="form2.address" placeholder="请输入公司地址" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="联系电话" prop="phone">
                                <el-input v-model="form2.phone" placeholder="请输入联系电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="出库顺序" prop="skuSort">
                                <el-input v-model="form2.skuSort" placeholder="请输入出库顺序" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票账号" prop="invoiceNumber">
                                <el-input v-model="form2.invoiceNumber" placeholder="请输入发票账号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="发票地址" prop="invoiceAddress">
                                <el-input v-model="form2.invoiceAddress" placeholder="请输入发票地址" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票电话" prop="invoicePhone">
                                <el-input v-model="form2.invoicePhone" placeholder="请输入发票电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="发票类型" prop="invoiceType">
                                
                                <el-select v-model="form2.invoiceType" placeholder="请输入发票类型">
                                    <el-option v-for="item in fapiaoleix" :key="item.label" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
    
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票开户行" prop="invoiceBank">
                                <el-input v-model="form2.invoiceBank" placeholder="请输入发票开户行" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="纳税人识别号" prop="invoiceTaxpayerNumber">
                                <el-input v-model="form2.invoiceTaxpayerNumber" placeholder="请输入纳税人识别号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="状态" prop="ifEnabled">
                                
                                <el-select v-model="form2.ifEnabled" placeholder="请输入状态">
                                    <el-option v-for="item in ZhuangTaivalue" :key="item.label" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="GongyingShangjiaoyan">
                            <el-form-item>
                                <el-button type="primary" @click="handleAdd">确定</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
    
                    
                </div>
            </el-dialog>
    
            
            <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
                <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                    :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                    :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip text-center" slot="tip">
                        <div class="el-upload__tip" slot="tip">
                            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
                        </div>
                        <span>仅允许导入xls、xlsx格式文件。</span>
                        <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
                            @click="importTemplate">下载模板</el-link>
                    </div>
                </el-upload>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </el-dialog>
            <el-dialog :title="title6" :visible.sync="open6">
                
                
                
                <div ref="print">我是打印哈哈哈</div>
    
            </el-dialog>
        </div>
    </template>
    <script>
    // import { addUserSysStore, listUserStore, updateUserStore, removeSysStore } from "@/api/WareSys/Cangkuxxguanli";
    // import { addUserSysStoreku, listUserStoreku, updateUserStoreku, removeSysStoreku } from "@/api/WareSys/Kuweixxweihu";
    import { addUserSysSupplier, listUserSupplier, updateUserSupplier, removeSysSupplier } from "@/api/WareSys/gongyingshangxxweihu";
    import { getToken } from "@/utils/auth";
    import { treeselect } from "@/api/system/dept";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    
    export default {
        name: "store",
        dicts: ['sys_normal_disable', 'sw_js_store_type', 'sys_user_sex', 'sw_js_store_type_manage_mode'],
        components: { Treeselect },
        data() {
            const phoneValidator11 = (rule, value, callback) => {
                if (/^1[3456789]\d{9}$/.test(value)) { // 利用正则表达式校验手机号
                    callback()
                } else {
                    callback(new Error('请输入正确手机号'))
                }
            }
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 用户表格数据
                userList: null,
                // 弹出层标题
                title: "",
                title1: "",
                title2: "",
                title6: "",
                // 部门树选项
                deptOptions: undefined,
                // 是否显示弹出层
                open: false,
                open1: false,
                open2: false,
                open6: false,
                // 部门名称
                deptName: undefined,
                // 默认密码
                initPassword: undefined,
                // 日期范围
                dateRange: [],
                // 岗位选项
                postOptions: [],
                //供应商信息维护
                gongyingshangxxweihuleix:{
                    invoiceType:'1',
                    ifEnabled:'-1'
    
                },
                //仓库类型
                CangkuLeixvalue: [{
                    value: '1',
                    label: '普通仓库'
                }, {
                    value: '2',
                    label: 'CDC仓库'
                }],
                value: '',
    
                //发票类别
                fapiaoleix: [{
                    value: '1',
                    label: '增值税专用发票'
                    }, {
                    value: '2',
                    label: '增值税普通发票'
                    }, {
                    value: '3',
                    label: '个人普通发票'
                    }, {
                    value: '4',
                    label: '不开发票'
                    }],
                value: '',
    
                //状态
                ZhuangTaivalue: [{
                    value: '-1',
                    label: '启用'
                }, {
                    value: '1',
                    label: '禁用'
                }],
                value: '',
                // 角色选项
                roleOptions: [],
                // 表单参数
                form: {
                    address: "",
                    ifEnabled: "",
                    invoiceAddress: "",
                    invoiceBank: "",
                    invoiceNumber: "",
                    invoicePhone: "",
                    invoiceTaxpayerNumber: "",
                    invoiceType: "",
                    name: "",
                    phone: "",
                    skuSort: "",
                    telPeople: ""
                },
                form1: {
                    // classifyId: "",
                    // brand: "",
                    // model: "",
                    // upc: "",
                    // description: "",
                    // ifEnabled: ""
                },
                form2: {
                    // classifyId: "",
                    // brand: "",
                    // model: ""
                    address: "",
                    ifEnabled: "",
                    invoiceAddress: "",
                    invoiceBank: "",
                    invoiceNumber: "",
                    invoicePhone: "",
                    invoiceTaxpayerNumber: "",
                    invoiceType: "",
                    name: "",
                    phone: "",
                    skuSort: "",
                    telPeople: ""
                },
                defaultProps: {
                    children: "children",
                    label: "label"
                },
                // 用户导入参数
                upload: {
                    // 是否显示弹出层（用户导入）
                    open: false,
                    // 弹出层标题（用户导入）
                    title: "",
                    // 是否禁用上传
                    isUploading: false,
                    // 是否更新已经存在的用户数据
                    updateSupport: 0,
                    // 设置上传的请求头部
                    headers: { Authorization: "Bearer " + getToken() },
                    // 上传的地址
                    url: process.env.VUE_APP_BASE_API + "/system/supplier/importSwJsSupplier"
                },
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    page: 1,
                    size: 10,
                    total: this.total,
                    name: undefined,
                    address: undefined
                },
                // 列信息
                //  columns: [
                //   {
                //     title:'状态',
                //     dataIndex:'ifEnabled',
                //     scopedSlots: { customRender: 'ifEnabled' }
                //   }
                // ],
    
                // 手机号校验器
               
                //表单校验
                rules: {
                    name: [
                        { required: true, message: "公司名称不能为空!", trigger: "blur" }
                    ],
                    telPeople: [
                        { required: true, message: "联系人不能为空!", trigger: "blur" }
                    ],
                    address: [
                        { required: true, message: "公司地址不能为空!", trigger: "blur" }
                    ],
                    phone: [
                        { required: true, message: "联系电话不能为空!", trigger: "blur" },
                        { validator: phoneValidator11, trigger: 'blur' }
                    ],
                    skuSort: [
                        { required: true, message: "出库顺序不能为空!", trigger: "blur" }
                    ],
                    invoiceNumber: [
                        { required: true, message: "发票地址不能为空!", trigger: "blur" }
                    ],
                    invoiceAddress: [
                        { required: true, message: "发票账号不能为空!", trigger: "blur" }
                    ],
                    invoicePhone: [
                        { required: true, message: "发票电话不能为空!", trigger: "blur" },
                        { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
                    ],
                    invoiceType: [
                        { required: true, message: "发票类型不能为空!", trigger: "blur" }
                    ],
                    invoiceBank: [
                        { required: true, message: "发票开户行不能为空!", trigger: "blur" }
                    ],
                    invoiceTaxpayerNumber: [
                        { required: true, message: "纳税人识别号不能为空!", trigger: "blur" }
                    ],
                    ifEnabled: [
                        { required: true, message: "状态不能为空!", trigger: "blur" }
                    ]
                },
    
            };
        },
        watch: {
            // 根据名称筛选部门树
            deptName(val) {
                this.$refs.tree.filter(val);
            }
        },
        created() {
            this.getList();
            this.getConfigKey("sys.user.initPassword").then(response => {
                // this.initPassword = response.msg;
            });
            this.getDicts("sw_js_store_type").then(response => {
                this.form.type = response.rows;
            });
            // this.form.type = this.dict[0].label;
        },
        methods: {
    
            // submitForm() {
            //     return new Promise((resole, reject) => {
            //         this.$refs['form2'].validate((valid) => {
            //             if (valid) {
            //                 console.log('submit!');
            //                 resole(this.form2);
            //             } else {
            //                 console.log('error submit!!');
            //                 reject();
            //             }
            //         })
            //     })
            // },
    
            /** 查询用户列表 */
            getList() {
                this.loading = true;
                listUserSupplier(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                    this.userList = response.data.rows;
                    this.total = response.data.total;
                    console.log(response.data.rows, 3369);
                    // console.log(response.data.content, 339688);
                    this.deleteFlag = response.data.rows.deleteFlag;
                    this.loading = false;
                }
                );
            },
            // /** 查询部门下拉树结构 */
            // getTreeselect() {
            //     treeselectt().then(response => {
            //         response.data.forEach((res) => {
            //             res.code = res.label ? res.label.substring(res.label.indexOf("-") + 1) : ""
            //             res.label = res.label ? res.label.substring(0, res.label.indexOf("-")) : ""
            //             if (res.children) {
            //                 res.children.forEach((i) => {
            //                     i.code = i.label ? i.label.substring(i.label.indexOf("-") + 1) : ""
            //                     i.label = i.label ? i.label.substring(0, i.label.indexOf("-")) : ""
            //                 })
            //             }
            //         })
            //         this.deptOptions = response.data;
            //         // this.deptOptions = response.data[0].label.substring(0, response.data[0].label.indexOf("-"));
            //         // console.log(response.data[response.data.length].label.substring(0, response.data[response.data.length].label.indexOf("-")),123456789);
            //         // console.log(response.data.label);
            //         // console.log(JSON.stringify(Object.assign({}, response.data)));
            //         // var j = JSON.stringify(Object.assign({}, response.data))
            //         // for(var key in j)
            //         // {
            //         //   //  alert();
            //         //   // console.log(key);
            //         // }
            //         // console.log(response);
            //         // console.log(response.data);
            //     });
            // },
            // 筛选节点
            // filterNode(value, data) {
            //
            //   if (!value) return true;
            //   alert("ddd");
            //   return data.indexOf(value) !== -1;
            // },
            // 节点单击事件
            // handleNodeClick(data) {
            //     // console.log(data)
            //     // this.queryParams.deptId = data.id;
            //     // console.log(data.label,88888);
            //     // const v1=data.label.substring(0, data.label.indexOf("-"));
            //     this.form.classifyNum = "";
            //     for (let i = 0; i < (data.code.split("-")).length - 1; i++) {
            //         if (i != 0) {
            //             this.form.classifyNum += ("-" + (data.code.split("-"))[i])
            //         } else {
            //             this.form.classifyNum += (data.code.split("-"))[i]
            //         }
            //     }
            //     // this.form.classifyNum =  data.code ? data.code.substring(0,data.code.indexOf("-") ):""//data.label.substring(v1.length+1, data.label.length);
            //     this.form.classifyName = data.label
            //     this.form.id = (data.code.split("-"))[data.code.split("-").length - 1]
            //     // console.log(data.code ? data.code.substring(data.code.indexOf("-") + 1) : "");
            //     this.handleQuery();
            // },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    classifyName: undefined,
                    classifyNum: undefined
                };
                // this.resetForm("form");
            },
    
            // 表单重置
            reset01() {
                this.form2 = {
                    address: undefined,
                    ifEnabled: undefined,
                    invoiceAddress: undefined,
                    invoiceBank: undefined,
                    invoiceNumber: undefined,
                    invoicePhone: undefined,
                    invoiceTaxpayerNumber: undefined,
                    invoiceType: undefined,
                    name: undefined,
                    phone: undefined,
                    skuSort: undefined,
                    telPeople: undefined
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                // var neirong = $('#miaoshu').val();
    
    
                this.userList.name = this.form.name;
                this.getList();
    
    
    
                this.queryParams.pageNum = 1;
                this.queryParams.name = "";
                // this.getList();
    
    
                //  this.queryParams.pageNum = this.form.classifyName;
    
                console.log(this.queryParams);
                // this.getList();
    
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.userId);
                this.single = selection.length != 1;
                this.multiple = !selection.length;
            },
            // 更多操作触发
            handleCommand(command, row) {
                switch (command) {
                    case "handleResetPwd":
                        this.handleResetPwd(row);
                        break;
                    case "handleAuthRole":
                        this.handleAuthRole(row);
                        break;
                    default:
                        break;
                }
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.$refs["form2"].validate((item)=>{
                    if(item){
                        // alert("可以提交");
                        addUserSysSupplier(this.form2).then(response => {
                        // console.log(this.from.parent_id, 123456789);
                        // this.classifyId = response.posts;
                        // console.log(response.posts,123456);
                        this.title = "添加用户";
                        this.$message({ message: '恭喜你，添加成功', type: 'success', style: 'color:red;!important' });
                        // this.getTreeselect();
                        // this.submitShangpin();
                        this.submitShangpin();
                        this.getList();
                        this.open2 = false;
                        this.reset01();
                        });
                    }else{
                        // alert("不可提交");
                        this.$message.error('请注意规范');
                    }
                })
    
    
                // this.submitForm();
                // if (this.form2.name != null || this.form2.address != undefined || this.form2.telPeople != undefined) {
                //     // console.log(this.form.id, 123456);
                   
                //     addUserSysSupplier(this.form2).then(response => {
                //         // console.log(this.from.parent_id, 123456789);
                //         // this.classifyId = response.posts;
                //         // console.log(response.posts,123456);
                //         this.title = "添加用户";
                //         this.$message({ message: '恭喜你，添加成功', type: 'success', style: 'color:red;!important' });
                //         // this.getTreeselect();
                //         // this.submitShangpin();
                //         this.submitShangpin();
                //         this.getList();
                //         this.open2 = false;
                //         this.reset01();
    
                //         console.log(this.form2.ifEnabled, 123456);
                //     });
                // } else {
                    
                //     this.$message.error('输入的内容不能为空呀');
                // }
    
                // this.reset();
                // } else {
                //   this.$message.error('错了哦，商品名称没有填呢');
                // }
    
            },
            handlechuangjiang() {
               
                this.open2 = true;
            },
            /** 修改按钮操作 */
            handleUpdate() {
                if (this.form.name != undefined) {
                    let row = {}
                    row.address = this.form.address;
                    row.ifEnabled = this.gongyingshangxxweihuleix.ifEnabled;
                    row.invoiceAddress = this.form.invoiceAddress;
                    row.invoiceBank = this.form.invoiceBank;
                    row.invoiceNumber = this.form.invoiceNumber;
                    row.invoicePhone = this.form.invoicePhone;
                    row.invoiceTaxpayerNumber = this.form.invoiceTaxpayerNumber;
                    row.invoiceType = this.gongyingshangxxweihuleix.invoiceType;
                    row.name = this.form.name;
                    row.phone = this.form.phone;
                    row.skuSort = this.form.skuSort;
                    row.telPeople = this.form.telPeople;
                    row.id = this.form.id;
                    // console.log(this.form.id);
                    updateUserSupplier(JSON.stringify(row)).then(response => {
                        // console.log(response,789)
                        // this.form = response.data;
                        // this.name = response.name;
                        // this.type = response.type;
                        // this.deliveryPriority = response.deliveryPriority;
                        // this.enableTotalOrder = response.enableTotalOrder;
                        // this.enableTakeGoods = response.enableTakeGoods;
                        // this.manageMode = response.manageMode;
                        // this.ifEnabled = response.ifEnabled;
                        // this.sysUserId = response.sysUserId;
                        console.log(this.form, 789)
                        // this.submitShangpin();
                        this.getList();
                        this.open = false;
                        this.$message({ message: '恭喜你，修改成功', type: 'success' });
    
                    });
    
                } else {
                    this.$message.error('错了哦，商品名称没有填呢');
                }
    
            },
            /** 详情按钮操作**/
            handleSelect(row) {
                this.open1 = true;
                this.form1.id = row.id;
                this.form1.address = row.address;
                this.form1.invoiceAddress = row.invoiceAddress;
                this.form1.invoiceBank = row.invoiceBank;
                this.form1.invoiceNumber = row.invoiceNumber;
                this.form1.invoicePhone = row.invoicePhone;
                this.form1.invoiceTaxpayerNumber = row.invoiceTaxpayerNumber;
                this.form1.invoiceType = row.invoiceType;
                this.form1.name = row.name;
                this.form1.phone = row.phone;
                this.form1.skuSort = row.skuSort;
                this.form1.ifEnabled = row.ifEnabled;
                this.form1.telPeople = row.telPeople;
            },
            /** 修改详情按钮操作**/
            handlexiangqengSelect(row) {
                console.log(row)
                // this.getList();
                this.open = true;
                console.log(row, 7788521);
                this.form.id = row.id;
                this.form.address = row.address;
                this.form.invoiceAddress = row.invoiceAddress;
                this.form.invoiceBank = row.invoiceBank;
                this.form.invoiceNumber = row.invoiceNumber;
                this.form.invoicePhone = row.invoicePhone;
                this.form.invoiceTaxpayerNumber = row.invoiceTaxpayerNumber;
                this.form.invoiceType = row.invoiceType;
                this.form.name = row.name;
                this.form.phone = row.phone;
                this.form.skuSort = row.skuSort;
                this.form.ifEnabled = row.ifEnabled;
                this.form.telPeople = row.telPeople;
            },
            /** 数形列表的商品分类按钮**/
            submitShangpin() {
                this.reset();
            },
            //列表刷新
            liebiaoshuax() {
                this.getList();
            },
            /** 重置密码按钮操作 */
            handleResetPwd(row) {
                this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    closeOnClickModal: false,
                    inputPattern: /^.{5,20}$/,
                    inputErrorMessage: "用户密码长度必须介于 5 和 20 之间"
                }).then(({ value }) => {
                    resetUserPwd(row.userId, value).then(response => {
                        this.$modal.msgSuccess("修改成功，新密码是：" + value);
                    });
                }).catch(() => { });
            },
            /** 分配角色操作 */
            handleAuthRole: function (row) {
                const userId = row.userId;
                this.$router.push("/system/user-auth/role/" + userId);
            },
            // /** 提交按钮 */
            // submitForm: function () {
            //     this.$refs["form"].validate(valid => {
            //         if (valid) {
            //             if (this.form.userId != undefined) {
            //                 updateUserStore(this.form).then(response => {
            //                     this.$modal.msgSuccess("修改成功");
            //                     this.open = false;
            //                     this.getList();
            //                 });
            //             } else {
            //                 addUser(this.form).then(response => {
            //                     this.$modal.msgSuccess("新增成功");
            //                     this.open = false;
            //                     this.getList();
            //                 });
            //             }
            //         }
            //     });
            // },
            /** 删除按钮操作 */
            handleDelete(row) {
    
                // row.classifyId = this.form.classifyId;
                // row.brand = this.form.brand;
                // row.model = this.form.model;
                // row.upc = this.form.upc;
                // row.description = this.form.description;
                // row.ifEnabled = this.form.ifEnabled;
                // row.id=this.form.id;
    
                console.log(row, 2222);
                this.$modal.confirm('是否确认删除用户编号为"' + JSON.stringify(row.id) + '"的数据项？').then(function () {
                    return removeSysSupplier(JSON.stringify(row));
                }).then((response) => {
                    this.submitShangpin();
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => { });
    
    
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download('/system/supplier/SwJsSupplierexport', {
                    ...this.queryParams
                }, `user_${new Date().getTime()}.xlsx`)
            },
    
            // handleExport() {
            //   const queryParams = this.queryParams;
            //   this.$confirm('是否确认导出所有用户数据项?', "警告", {
            //     confirmButtonText: "确定",
            //     cancelButtonText: "取消",
            //     type: "warning"
            //   }).then(function () {
            //     return exportUser(queryParams);
            //   }).then(response => {
            //     this.download(response.msg);
            //   }).catch(function () { });
            // },
    
            /** 导入按钮操作 */
            handleImport() {
                this.upload.title = "商品分类";
                this.upload.open = true;
            },
            /** 下载模板操作 */
            importTemplate() {
                this.download('/system/supplier/importSwJsSupplierTemplate', {
                }, `user_template_${new Date().getTime()}.xlsx`)
            },
            // 文件上传中处理
            handleFileUploadProgress(event, file, fileList) {
                this.upload.isUploading = true;
            },
            // 文件上传成功处理
            handleFileSuccess(response, file, fileList) {
                this.upload.open = false;
                this.upload.isUploading = false;
                this.$refs.upload.clearFiles();
                this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
                this.getList();
            },
            // 提交上传文件
            submitFileForm() {
                this.$refs.upload.submit();
            },
    
            daoying(){
                // this.$print(this.$refs.print);
            }
    
            //测试树状菜单
            // handleNodeClick(data) {
            //   console.log(data);
            // }
        }
    };
    </script>
    <style src="../gongyingshangxxweihu/gyscss/gys.css">
    </style>

(3)修改router/index.js中的path和import('@/views/table/gathering') 其中path为访问路径，import为views文件夹中的table文件夹中的gathering.vue文件

{
        path: '/vmodel',
        component: Layout,
        redirect: '/vmodel',
        meta: { title: '自定义组件', icon: 'el-icon-s-help' },
        children: [
          {
            path: 'vmodel',
            name: 'vmodel',
            component: () => import('@/views/vmodel/vmodel/index'),
            meta: { title: '模型自定义', icon: 'dashboard' }
          },
          {
            path: 'vmodal',
            name: 'vmodal',
            component: () => import('@/views/vmodel/vmodal/index'),
            meta: { title: '模型自定义', icon: 'dashboard' }
          }
        ]
      }

(4)reload工程 ： npm run dev

![0ea617d8293c4763902f801bfa2dfc13.png][]

(5)plus：如果此时你在开发者工具中能正常接收数据，但是无法显示，考虑easy-mock中的接口设置，返回值是否为20000等。

\{  
"code": 20000,  
"flag": true,  
"message": "@string",  
"data|10": \[\{  
"id": "@string",  
"name": "@cword(8,12)",  
"summary": "@cword(20,40)",  
"detail": "@cword(20,40)",  
"sponsor": "@string",  
"image": "@image",  
"starttime": "@date",  
"endtime": "@date",  
"address": "@county(true)",  
"enrolltime": "@date",  
"state": "@string",  
"city": "@string"  
\}\]  
\}

### 3.使用pagination实现分页 ###

我们已经通过表格组件完成了列表的展示，接下来需要使用分页组件完成分页功能

![33e43f9a47244613bb76a151e44a6e08.png][]

一般对于分页，都需要前端传递给后端两个参数：①当前页码 ②每页显示条数

由于笔者项目中用到了Easy Mock，所以我们第一步应该修改Easy Mock中的接口，产生更真实的模拟数据

(1)修改接口/gathering/gathering/search/\{page\}/\{size\} method:POST

(2)在gathering.js中添加新方法search，page当前页码，size每页显示条数，searchMap查询条件

参考返回数据结构：

![39490a99f45b4d809519db3da501d82a.png][]

此时js部分(逻辑处理层)我们已经完成，参考官方文档完成分页组件UI层：

plus：@代表调用的方法，当每页显示个数和当前页码改变时会调用方法fetchData，:name代表属性

<el-pagination
          @size-change="fetchData"
          @current-change="fetchData"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

plus：如果加入该<el-pagination>到<template>中报错，考虑在<template>下添加一个<div>标签，因为<template>下只能有一个标签加入后即只有一个<div>标签，否则将存在<el-table>标签和<el-pagination>标签，故报错。

### 4. 使用分页+条件查询 ###

需求:在分页列表的基础上实现条件查询功能【使用到了表单控件、文本输入控件、日期输入控件、行内表单等】

![1f8111bbf4a34727a9474f3ba35a5173.png][]

总体template代码:

### 5-6. 弹出窗口、消息提示、select下拉框 ###

需求：界面中加入"新增"按钮，点击弹出编辑窗口，点击“修改”按钮，关闭窗口并刷新表格，弹出提示(成功或失败)

![ec6ccb180ade448cb81669ffe6eb5a3b.png][]

涉及知识点：dialog组件、$message、switch开关、textarea文本域、form表单、select下拉框等

参考官方文档：http://element-cn.eleme.io/\#/zh-CN/component/dialog (如何调出窗口并关闭窗口)

plus：注意！需要在return内部声明一个实体对象，用于存储表单数据 ，如：renturn\{ pojo:\{\} \}

(省略了一部分代码)新增city.js，并导出(参考gathering.js)。在gathering.vue中导入city，并在打开视图时就加载城市：

created() {
        this.fetchData()
        cityApi.getList().then(response => {
          this.cityList = response.data
        })
      }

不要忘记在return中加入city这个实体对象，否则为空报错。如return\{ cityList:\[\] \}

<template>视图层代码：

<el-dialog :title="title" :visible.sync="open2">
                <el-form ref="form2" :model="form2" label-width="45%" :rules="rules" class="chuangjianform">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="公司名称" prop="name">
                                <el-input v-model="form2.name" maxlength="30" placeholder="请输入名称" style="width:98%" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="联系人" prop="telPeople">
                                <el-input v-model="form2.telPeople" maxlength="30" placeholder="请输入联系人" style="width:98%" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="公司地址" prop="address">
                                <el-input v-model="form2.address" placeholder="请输入公司地址" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="联系电话" prop="phone">
                                <el-input v-model="form2.phone" placeholder="请输入联系电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="出库顺序" prop="skuSort">
                                <el-input v-model="form2.skuSort" placeholder="请输入出库顺序" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票账号" prop="invoiceNumber">
                                <el-input v-model="form2.invoiceNumber" placeholder="请输入发票账号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="发票地址" prop="invoiceAddress">
                                <el-input v-model="form2.invoiceAddress" placeholder="请输入发票地址" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票电话" prop="invoicePhone">
                                <el-input v-model="form2.invoicePhone" placeholder="请输入发票电话" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="发票类型" prop="invoiceType">
                                
                                <el-select v-model="form2.invoiceType" placeholder="请输入发票类型">
                                    <el-option v-for="item in fapiaoleix" :key="item.label" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
    
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="发票开户行" prop="invoiceBank">
                                <el-input v-model="form2.invoiceBank" placeholder="请输入发票开户行" maxlength="30" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="纳税人识别号" prop="invoiceTaxpayerNumber">
                                <el-input v-model="form2.invoiceTaxpayerNumber" placeholder="请输入纳税人识别号" maxlength="30" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="11">
                            <el-form-item label="状态" prop="ifEnabled">
                                
                                <el-select v-model="form2.ifEnabled" placeholder="请输入状态">
                                    <el-option v-for="item in ZhuangTaivalue" :key="item.label" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="handleAdd">确定</el-button>
                    
                </div>
            </el-dialog>

当我们点击保存按钮的时候，则触发几个动作：①弹出消息提示框(消息内容来自于响应体中的message) ②判断消息状态是否为true，为true则刷新列表(调用之前的刷新列表方法) ③关闭窗口(设置dialogVisible = false)，主要代码如下：

<template>
    ...
        <el-form-item>
           <el-button type="primary" @click="handlerSave()">保存</el-button>
           <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </el-form-item>
    ...
    </template>
     
    <script>
        ...
        methods:{
            handlerSave(){
              gatheringApi.save(this.pojo).then(response => {
              alert(response.message)
              if(response.flag){         //如果成功
              this.fetchData();        //刷新列表
            }
          })
          this.dialogFormVisible=false //关闭窗口
        }
        }
        ...
    </script>

7、在列表显示页面右侧执行修改操作  
需求：在表格的操作列增加"修改"按钮，点击修改按钮弹出窗口并显示数据，点击保存按钮保存 修改并刷新表格。

需求分析：在点击修改按钮时候，首先需要打开窗口(修改dialogVisible = true)，其次获取点击的数据行id，根据该id查询数据并回显，在点击保存按钮时候，执行上面所讲的保存操作。

由于我们使用Easy-Mock模拟数据，我们首先需要修改根据id查询数据的接口

(1)修改easymock接口/gathering/gathering/\{id\} (GET)

(2)修改src/api/gathering.js，增加方法定义

findById(id) {
       return request({
          url: `/gathering/gathering/${id}`,
          method: 'get'
       })
    }

(3)修改src/views/table/gathering.vue的js脚本部分,新增handleEdit()方法

handleEdit(id){
       this.dialogFormVisible=true  //打开窗口
        gatheringApi.findById(id).then(response=>{
          if(response.flag){
            this.pojo=response.data
          }
        })
    }

(4)在表格table中增加模板列 ,模板列中防止修改按钮，调用handleEdit方法

<el-table-column
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
          </template>
    </el-table-column>

fixed="right"的作用是定义此列为右固定列slot-scope用于指定当前行的上下文。

使用scope.row可以获取行对象，此处我们需要获得当前行的id，故使用scope.row.id

[343c1857ebc44396a0b4b22b3e76f65d.png]: https://img-blog.csdnimg.cn/343c1857ebc44396a0b4b22b3e76f65d.png
[0ea617d8293c4763902f801bfa2dfc13.png]: https://img-blog.csdnimg.cn/0ea617d8293c4763902f801bfa2dfc13.png
[33e43f9a47244613bb76a151e44a6e08.png]: https://img-blog.csdnimg.cn/33e43f9a47244613bb76a151e44a6e08.png
[39490a99f45b4d809519db3da501d82a.png]: https://img-blog.csdnimg.cn/39490a99f45b4d809519db3da501d82a.png
[1f8111bbf4a34727a9474f3ba35a5173.png]: https://img-blog.csdnimg.cn/1f8111bbf4a34727a9474f3ba35a5173.png
[ec6ccb180ade448cb81669ffe6eb5a3b.png]: https://img-blog.csdnimg.cn/ec6ccb180ade448cb81669ffe6eb5a3b.png