antd design 自定义表头

news2025/1/6 12:26:29

 

 

<template>
  <a-card :bordered="false">
    <div class="contentWrap">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="12">
              <a-form-item label="登录账号">
                <a-input placeholder="请输入登录账号" :max-length="40" v-model="queryParam.manufactureEnterprise"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="12">
              <a-form-item label="用户姓名">
                <a-input placeholder="请输入用户姓名" :max-length="40" v-model="queryParam.model"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 操作按钮区域 -->
      <div class="table-operator" style="border-top: 5px">
        <a-button @click="handleAdd" type="primary" icon="plus">新增账号</a-button>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <template slot="account" slot-scope="text">
            <j-ellipsis :value="text" :length="30"></j-ellipsis>
          </template>
          <template slot="passwordTitle">
            登录密码
            <a-tooltip title="说明" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
          </template>
          <template slot="passwordType" slot-scope="text">
            <span>
              {{ filterDictText(passwordTypeOption, text) }}
            </span>
          </template>
          <template slot="loginLimit" slot-scope="text">
            <span>
              {{ filterDictText(loginLimitOption, text) }}
            </span>
          </template>
          <template slot="status" slot-scope="text">
            <span>
              {{ filterDictText(statusOption, text) }}
            </span>
          </template>
          <span slot="action" slot-scope="text, record">
            <a v-if="record.passwordType == '原始密码'" @click="handlePwd(record.passwordType)">原始密码</a>
            <a-popconfirm v-else @confirm="() => handlePwd(record.passwordType)">
              <template slot="title">
                <div>是否重置密码?</div>
              </template>
              <a>重置密码</a>
            </a-popconfirm>
            <a-divider type="vertical" />

            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />

            <a-popconfirm @confirm="() => handleDelete(record.modelId)">
              <template slot="title">
                <div>删除后该账户无法登陆平台。</div>
                <div>账户不可找回。</div>
              </template>
              <a>删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            
            <a-popconfirm @confirm="() => handleStatus(record.modelId)">
              <template slot="title">
                <div>是否改为{{record.status == '启用' ? '禁用' : '启用'}}状态?</div>
              </template>
              <a>{{record.status == '启用' ? '禁用' : '启用'}}</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
    </div>
    <AddModal ref="modalForm" @ok="modalFormOk" :loginLimitOption="loginLimitOption" :statusOption="statusOption"></AddModal>
  
  </a-card>
  
</template>

<script>
// @ is an alias to /src
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import AddModal from './modules/AddModal'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'

export default {
  name: 'model',
  mixins: [JeecgListMixin],
  components: { AddModal },
  data() {
    return {
      queryParam: {},
      passwordTypeOption: [],
      loginLimitOption: [],
      statusOption: [],
      columns: [
        {
          title: '登录账户',
          align: 'center',
          dataIndex: 'account',
          scopedSlots: { customRender: 'account' },
          width: 100,
        },
        {
          title: '用户姓名',
          align: 'center',
          dataIndex: 'userName',
          scopedSlots: { customRender: 'userName' },
          width: 100,
        },
        {
          // title: '登录密码',
          // slots: { title: '登录密码' },
          align: 'center',
          width: 100,
          dataIndex: 'passwordType',
          scopedSlots: { customRender: 'passwordType', title: 'passwordTitle' },
        },
        {
          title: '登录权限',
          align: 'center',
          width: 100,
          dataIndex: 'loginLimit',
          scopedSlots: { customRender: 'loginLimit' },
        },
        {
          title: '启用状态',
          align: 'center',
          width: 80,
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '创建时间',
          align: 'center',
          width: 80,
          dataIndex: 'creatTime',
          scopedSlots: { customRender: 'creatTime' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center',
          width: 100,
        },
      ],
      url: {
        list: 'jeccgApi'+'/sys/energy/storageCabinetModel/list',
        delete: 'jeccgApi'+'/sys/energy/storageCabinetModel/delete',
      },
    }
  },
  created() {
    this.getDictOptions()
  },
  mounted() {},
  methods: {
    filterDictText,
    getDictOptions() {
      initDictOptions('material_type').then((res) => {
        // console.log('mmmm', res)
        if (res.success) {
          this.passwordTypeOption = res.result
        }
      })
      initDictOptions('material_type').then((res) => {
        // console.log('mmmm', res)
        if (res.success) {
          this.loginLimitOption = res.result
        }
      })
      initDictOptions('material_type').then((res) => {
        // console.log('mmmm', res)
        if (res.success) {
          this.statusOption = res.result
        }
      })
    },
    handleAdd() {
      this.$nextTick(() => {
        this.$refs.modalForm.add()
      })
    },
    handleEdit(row) {
      this.$nextTick(() => {
        this.$refs.modalForm.edit(row)
      })
    },
    modalFormOk() {
      // 新增/修改 成功时,重载列表
      this.loadData(1)
    },
    handlePwd(type) {
      if(type == '原始密码') {
        // 复制密码

      } else {
        // 重置密码
      }
    },
    handleStatus(row) {
      
    }
  },
}
</script>

<style scoped>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1709406.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【InternLM实战营第二期笔记】03:“茴香豆“,搭建你的 RAG 智能助理(未完成)

文章目录 笔记-RAG课程结构为什么要用 RAG&#xff1f;定义工作原理向量数据库RAG 工作流程发展历程常见优化RAG vs 微调LLM 优化方法比较RAG的评价总结 笔记-茴香豆什么是茴香豆茴香豆实战 笔记-RAG 课程结构 为什么要用 RAG&#xff1f; 新增知识&#xff0c;尤其是高频变动…

利用开源工具创建WEBGIS应用

在本文中&#xff0c;我们将大致说明利用开源工具如何与服务器交互以构建交互式或动态 Web GIS。 WebGIS 应用程序已成为展示地理数据的重要模式。我们现在拥有允许用户交互的机制&#xff0c;以便用户可以选择数据&#xff0c;甚至修改或添加新数据。 什么是WEBGIS? 通过网络…

三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件

这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。 官网demo地址&#xff1a; Double click, Drag and Zoom 官网介绍文字的翻译如下&#xff1a; 示例比较简单&#xff0c;直接贴代码&#xff1a; const map new Map({//添加第二次点击拖拽缩放地图i…

Meta 推出新型多模态 AI 模型“变色龙”(Chameleon),挑战 GPT-4o,引领多模态革命

在人工智能领域&#xff0c;Meta 近日发布了一款名为“变色龙”&#xff08;Chameleon&#xff09;的新型多模态 AI 模型&#xff0c;旨在挑战 OpenAI 的 GPT-4o&#xff0c;并刷新了当前的技术标准&#xff08;SOTA&#xff09;。这款拥有 34B 参数的模型通过 10 万亿 token 的…

探索机器人智能设备:开启智慧生活新篇章

机器人智能设备作为科技创新的代表&#xff0c;正以其独特的魅力吸引着越来越多的关注。它们不仅具备高度的智能化和自主化能力&#xff0c;还能在各种场景下发挥出强大的功能。 机器人智能设备的张总说&#xff1a;在智能家居领域&#xff0c;机器人智能设备可以帮助我们实现家…

骨折分类数据集1129张10类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;1129 分类类别数&#xff1a;10 类别名称:["avulsion_fracture",…

鸿蒙ArkUI-X跨语言调用说明:【平台桥接开发指南(Android)BridgePlugin】

BridgePlugin (平台桥接) 本模块提供ArkUI端和Android平台端消息通信的功能&#xff0c;包括数据传输、方法调用和事件调用。需配套ArkUI端API使用&#xff0c;ArkUI侧具体用法请参考[Bridge API]。 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-…

微软Copilot+ PC:Phi-Silica

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调重新阅读。而最新科技&#xff08;Mamba&#xff0c;xLSTM,KAN&#xff09;则提供了大模…

webserver服务器从零搭建到上线(九)|⭐️EventLoop类(一)——详解成员变量、简述成员方法

在本节中&#xff0c;我们一起来仔细探讨一下EpollPoller类。该类可以说是muduo库中最最核心的类了&#xff0c;一定要搞懂&#xff01; 文章目录 私有成员using ChannelList std::vector<Channel*>looping_、quit_threadId_pollReturnTime_、poller_wakeup_fd、wakeupC…

机器学习-1-了解机器学习machine learning的基本概念

参考机器学习算法 - 一文搞懂ML(机器学习) 参考机器学习算法 - 一文搞懂SL(监督学习) 参考机器学习算法 - 一文搞懂UL(无监督学习) 1 机器学习 1.1 机器学习的本质 基本思路:无论使用什么样的算法和数据,机器学习的基本思路都可以归结为以下三个核心步骤。 (1)问题…

Nginx的集群负载均衡(nginx构建tomcat集群案例)

一 .Nginx的集群负载均衡 1.nginx 集群负载均衡示意图 2.四层负载均衡和7层负载均衡 LVS 四层负载均衡(常用); Haproxy四层负载均衡;Nginx 四层负载均衡; Haproxy七层负载均衡;Nginx 七层负载均衡(常用); 3.nginx构建tomcat集群 步骤1:安装tomcat 步骤2:nginx配置tom…

图论(五)-最短路

一、Bellman-Ford算法 算法思想&#xff1a;通过 n 次循环&#xff0c;每次循环都遍历每条边&#xff08;共 m 条边&#xff09;&#xff0c;进而更新节点的距离&#xff0c;每次循环至少可以确定一个点的最短路&#xff0c;循环 n 次&#xff0c;求出 n 个点的最短路 时间复杂…

git:Unable to negotiate问题解决

场景说明&#xff1a; 安装了Gitblit(自架的代码仓库服务)发现部分电脑无法推代码&#xff0c;报错误如下&#xff1a; Unable to negotiate with **** port 22: no matching host key type found. Their offer: ssh-rsa 并排队了账户权限问题。 解决方案&#xff1a; 1.打开问…

HttpClient cookie爬虫记录

记录一次java语言使用httpclient爬取网站接口数据的经历 需要用到的依赖&#xff1a; httpclient和httpcore是封装了http请求的工具类 jsoup可以将返回的网页html找到你需要的xml节点&#xff0c;很方便 <dependency><groupId>org.apache.httpcomponents</gr…

Spring系列-01-IOC的依赖查找和依赖注入

IOC基础 IOC发展 初始场景, 不使用IOC如何实现 假定现在有一下需求, 开始使用的数据源是MySQL, 后续数据源变动为Oracle, 那么我们的代码就需要改动 每次切数据源都需要改动, 那么进行优化 静态工厂解决强依赖 在01版本基础上, 使用静态工厂对多个数据源进行了封装, 要哪…

Unity UGUI系统概念分析

文章目录 前言一、UGUI运行原理二、UGUI组件分析1、Canvas组件2、Canvas Scaler3、Graphic Raycaster组件4、EventTrigger组件5、Image 和 RawImage组件5、Mask 和 RectMask2D组件6、Button、Sider、DropDown等组件 三、UGUI源码分析三、UGUI优化四、UI框架设计五、UI适配总结 …

三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据

官网demo地址&#xff1a; Draw Features 先初始化地图&#xff0c;准备一个空的矢量图层&#xff0c;用于显示绘制的图形。 initLayers() {const raster new TileLayer({source: new XYZ({url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/…

快团团帮卖团长怎么对供货大团长进行评分?

都说帮卖“躺赚”&#xff1f; 一旦遇团不淑&#xff0c;惨遭不靠谱团长挖坑&#xff0c;售后拖延、发货慢、产品瑕疵…… 加上顾客夺命连环催&#xff0c;双面夹击&#xff0c;夹缝生存。供货团长靠不靠谱太重要了&#xff01; 快团团供货团长评分系统上线&#xff01; 帮卖团…

深入理解MySQL索引下推优化

在MySQL中&#xff0c;索引的使用对于查询性能至关重要。然而&#xff0c;即使有合适的索引&#xff0c;有时查询性能仍然不尽如人意。索引下推&#xff08;Index Condition Pushdown&#xff0c;ICP&#xff09;是一项能够进一步优化查询性能的技术。本文将详细讲解索引下推的…

Postman入门 - 环境变量和全局变量

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、发送请求 二、设置并引用环境变量 比如&#xff1a;我建的这个生产环境 使用环境有两个方式&…