管理后台界面详细分析(内含代码 |【前端】)RuoYi_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: IPFS落地应用需要多久？FIL现在还... 下一篇:如果spring和mybatis整合与 spr...

管理后台界面详细分析(内含代码 |【前端】)RuoYi

发布时间：2022-07-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了管理后台界面详细分析(内含代码 |【前端】)RuoYi，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

最近在做的一个后台管理因为关于隐私原因只方便展示个别页面代码不会上传项目 注意是前端代码我把项目代码地址放在最后了如有需要可自取学习我会为各位兄弟详细的介绍其中各个属性的含义和用法，记得三连，三Q儿了 //

效果图：

管理后台界面详细分析(内含代码 |【前端】)RuoYi

实现效果为右侧红框包括头部导航搜索和重置按钮，新增、修改、批量删除和导出下面是表格数据底部翻页

首先是头部搜索导航

 <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSeArch" label-width="80px">
      <el-form-item label="测试3" PRop="postCode">
        <el-input
          v-model="queryParams.postCode"
          placeholder="输入测试3..."
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-ITem>
      <el-form-item label="测试岗位" prop="postName">
        <el-input
          v-model="queryParams.postName"
          placeholder="请输入测试岗位。。。。"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        ></el-input>
      </el-form-item>
      <el-form-item label="选择" prop="status">
        <el-select v-model="queryParams.status" placeholder="选择test" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button tyPE="Primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button type="success" icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

这是一个el-form表单 ref:用来给dom元素或子组件注册引用信息，如果想要进行操作dom，需要先进行ref注册属性:inline:官方解释为行内表单模式，也叫内联，在一个文本行内生成元素框，而不会打断这行文本

v-show：可以动态的显示dom元素这里提一下v-ifv-show和v-if都是dom渲染都可以动态的显示dom元素不同的是 v-show在任何情况下都会先进行渲染然后再进行判断条件是否为true，若不为true则被缓存但dom元素保留，而v-if是先进行判断再编译。适用场景当然也不同 v-show适合频繁切换 v-if反之

label-width：表单域标签的宽度例如50px ，那么form表单的直接子元素form-item就会进行继承，这里会出现像margin:50px的效果clearable: 表示是否可清空，属于编辑功能输入框右侧会出现一个清除符号@keyup.enter.native: 回车事件，vue监听键盘回车事件，当回车(Enter)时触发监听事件进行操作，在自定义组件绑定原生事件时例如element ui 内就要使用.native修饰符，vue还特别贴心的用了enter来作为别名很赞<el-select> <el-option/> </el-select>: 不用多说了相信都用过，下拉框下拉选择el-button:按钮这个就不说了

下面是新增、修改、批量删除

  <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
        <!--当增加这个right-toolbar时  我的form表单就无法点击也无法使用-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

:gutter:栅格布局间隔距离:span:栅格占据的列数，element栅格布局基础分为24栏:disabled:是否禁用 single 单一 multiple 多个right-toolbar：form无法点击也无法使用、plain：当鼠标划过或者点击时按钮背景颜色会变深色

table表格

<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="60" align="center"/>
      <el-table-column label="测试2" align="center" prop="postId"/>
      <el-table-column label="测试3" align="center" prop="postCode"/>
      <el-table-column label="测试岗位" align="center" prop="postName"/>
      <el-table-column label="测试顺序" align="center" prop="postSort"/>
      <el-table-column label="测试6" align="center" prop="status" :formatter="statusFormat"/>

      <el-table-column label="测试7" align="center" prop="createTime">
<!--        日期格式 parseTime格式 进行解析时间-->
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<!--        带数据的插槽  slot-scope        -->
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            size="mini"
            style="color:#ff0000"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

v-loading:显示加载中，在接口请求到数据之前，显示加载中，直到请求到数据后消失@selection-change：el-table使用多选框时，当选项发生变化时触发该事件表格左侧有勾选框，当勾选全选时，selection-change触发操作:data:显示的数据

分页

  <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

分页组件 total：总条数 pagesize：每页显示数据条数

diaLOG弹出框

 <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="测试岗位" prop="postName">
          <el-input v-model="form.postName" placeholder="测试....."/>
        </el-form-item>
        <el-form-item label="测试2" prop="postCode">
          <el-input v-model="form.postCode" placeholder="测试........"/>
        </el-form-item>
        <!--顺序-->
        <el-form-item label="测试5" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="测试顺序" prop="postSort">
          <el-input-number v-model="form.postSort" controls-position="right" :min="0"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>

@H_174_1262@

title:弹框标题 :visible: 我有一篇博客详细讲过链接在这===》:visible.sync 去看吧 append-to-body:对话框中嵌套dialog rules：表单验证规则就是表单验证信息

本篇文章代码使用若依进行二开。。最后把代码地址放在这有需要可以拿去学习学习 “二开代码片段” 收队 //禁止转载转载告我一声俺脾气不小

管理后台界面详细分析(内含代码 |【前端】)RuoYi

脚本宝典总结

以上是脚本宝典为你收集整理的管理后台界面详细分析(内含代码 |【前端】)RuoYi全部内容，希望文章能够帮你解决管理后台界面详细分析(内含代码 |【前端】)RuoYi所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：cap column column java list load load php posts python sort 程序员程序员

上一篇: IPFS落地应用需要多久？FIL现在还... 下一篇:如果spring和mybatis整合与 spr...

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15

全站导航更多

管理后台界面 详细分析(内含代码 |【前端】)RuoYi

下面是新增、修改、批量删除

table表格

分页

diaLOG弹出框

脚本宝典总结

管理后台界面详细分析(内含代码 |【前端】)RuoYi