jeecg-boot前端实现表格插槽、定制化修改

简介: jeecg-boot前端实现表格插槽、定制化修改

大家好,我是雄雄。

前言

关于jeecg-boot,之前介绍过好多好多次,至于说这是个什么样的技术,这里不在详细介绍,大家可以在gitee或者百度上搜搜,大致了解一下。

因为是个开源的框架,所以一般小项目,我们都是直接将jeecg-boot源码拉下来,在此基础上,将现有业务嵌入进去,耗费时间不多,一整个项目就出来了,方便又快捷。

微服务的我们也用过,单服务的我们也用过,关于怎么选,那就得看实际项目了,不过我还是建议,小企业,能不用微服务架构尽量不要用微服务架构,直接用单服务的也可以,因为微服务太吃服务器内存了…

长话短说,今天我们就展开某一个案例来介绍一下,如题目所说,我们有这样的场景:表中有个字段是status,当它为0时,我们给用户展示的是【已签约】,如果是1,则给用户展示【已解约】。因为用户不知道你的0和1都代表啥,所以我们需要用浅显易懂的汉字给展示出来。

效果图

大家注意,左边的三列(接入方名称),颜色和别的不一样,是因为这个也是可以点击的,加了超链接,当我们点击某个名称时,出现的如下所示:

今天,我们就来看看如何在jeecg-boot前端,实现这两个功能

表格插槽操作

jeecg-boot的前端,集成的是Ant Design Vue,所以我们遇到问题,可以直接去查他的官方文档:在这里

不过说实话,文档如不element-ui看着舒服,凑合看吧。

因为status这个字段存的值是0和1,而我们要显示的是【已签约】和【已解约】,所以这边需要借助一下插槽处理一下,代码如下:

columns中找到需要处理的字段,我这边是status

{
            title:'合作状态',
            align:"center",
            dataIndex: 'status',
            customRender: text => {
              let result = ''
              switch (text) {
                case 0:
                  result = '已签约'
                  break
                case 1:
                  result = '已解约'
                  break
              }
              return result;
            }
          },

我使用的是switch来实现的,大家也可以用if-else来实现,一样的道理。

点击名称弹出模态框

效果图中我们也看到了,有些场景用户想直接点击名称就能看详情信息,而不是点击列的最后【详情】去看,所以我们就得简单处理一下。

实现思路,还是用到了上面提到的插槽,我们现在操作的是名称:

{
            title:'接入方名称',
            align:"center",
            dataIndex: 'name',
            scopedSlots: { customRender: 'nameSlot' }
          },

在表格的下面,加入一个插槽:

<!--名称的插槽-->
        <span slot='nameSlot' slot-scope='text, record'>
          <!--<router-link :to="{path:'/sggg/member/'+record.id}">{{ text }}</router-link>-->
          <a @click='getInfo(record)'>{{ text }}</a>
        </span>

methods方法中,实现getInfo方法:

//接入方名字的点击事件
      getInfo(record){
        this.accessParty = record;
        this.visible = true;
      },

this.visible 是控制我们的模态框是否显示,当我们点击名称时,让显示出来,所以值需要改成true

data中声明变量:

//模态框
        visible: false,

最后就是我们需要展示的模态框的内容了,在vue页面随便找个空地,写代码如下:

<!--点击名称后,弹出来的层-->
    <j-modal
      :visible='visible'
      width='30%'
      cancelText='关闭'
      switchFullscreen
      title='接入方详情'
      @cancel='visible = false'
      @ok='visible = false'>
      <a-divider orientation="left" style="font-size: 20px;"><b>基本信息</b></a-divider>
      <a-row justify="center" type="flex">
        <a-col :span="10" :offset="2">接入方名称:</a-col>
        <a-col :span="12">{{accessParty.name}}</a-col>
      </a-row>
      <a-row justify="center" type="flex">
        <a-col :span="10" :offset="2">地址:</a-col>
        <a-col :span="12">{{accessParty.administrative}}</a-col>
      </a-row>
      <a-row justify="center" type="flex">
        <a-col :span="10" :offset="2">联系人:</a-col>
        <a-col :span="12">{{accessParty.userName}}</a-col>
      </a-row>
      <a-row justify="center" type="flex">
        <a-col :span="10" :offset="2">联系电话:</a-col>
        <a-col :span="12">{{accessParty.phone}}</a-col>
      </a-row>
    </j-modal>

最后我们想要的效果就可以实现啦~

目录
相关文章
|
7天前
|
前端开发
Web前端---表格和表单
Web前端---表格和表单
33 1
|
7天前
|
存储 前端开发
web前端开发----------表格
web前端开发----------表格
52 0
|
7月前
|
前端开发
【前端】elementUI表格根据状态显示不同的字体颜色
【前端】elementUI表格根据状态显示不同的字体颜色
114 0
|
7天前
|
前端开发
【零基础入门前端系列】—表格的属性(十三)
【零基础入门前端系列】—表格的属性(十三)
|
7天前
|
前端开发
【零基础入门前端系列】—表格(六)
【零基础入门前端系列】—表格(六)
|
6月前
|
JavaScript 前端开发 Java
前端js实现打印excel表格
前端js实现打印excel表格
80 0
|
6月前
|
JavaScript 前端开发 Java
前端js实现打印(导出)excel表格
前端js实现打印(导出)excel表格
64 0
|
7月前
|
前端开发 计算机视觉
Excel | 前端实现复杂表格导入导出
通过前端技术实现复杂excel表格(合并单元格,这里没有做表格的数据类型)的导入导出,下面代码还有简单表格的导出。 以下代码,cv即可用。主要是vue3以及ts的简单写法。
|
8月前
|
存储 JSON 移动开发
在前端轻量化的导出表格数据
在前端轻量化的导出表格数据
66 0
|
5天前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战