antd design 自定义表头

 

 

<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-tableref="table"borderedsize="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.mzph.cn/web/15501.shtml

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

相关文章

云端智享——记移动云手写docker-demo

目录 前言什么是移动云&#xff1f;为何我会使用移动云&#xff1f;移动云“好”在哪里&#xff1f;资源大屏显示继续项目部署其他细节 移动云产品的评价未来展望 前言 在如今这个万物都上云的时代&#xff0c;我们需要选择合适的云产品&#xff0c;而移动云有着独特的优势和广…

TypeScript-联合类型和别名类型

联合类型 作用&#xff1a;将多个类型合并为一个类型对变量进行注解 // 数组里面既有字符串类型 也有数字类型 let arr:(string | number)[] [20,lily] 别名类型 通过type关键词给写起来较复杂的类型起一个其它的名字 好处&#xff1a;用来简化和复用类型 说明&#xff…

golang中chan的高级用法

在阅读k8s的源代码中&#xff0c;发现了一些比较有意思的用法。 在Go语言中&#xff0c;chan&#xff08;通道&#xff09;是一种用于在不同的goroutine之间进行通信的机制。WaitForCacheSync(stopCh <-chan struct{}) error方法中的参数stopCh <-chan struct{}表示一个…

1.存储部分

1.Flash Memory--闪速存储器&#xff08;注&#xff1a;U盘&#xff0c;SD卡就是闪存&#xff09;在EEPROM基础上发展而来的&#xff0c;断电后也能保存信息&#xff0c;且可进行多次 快速擦除重写。注意&#xff1a;由于闪存需要先擦除再写入&#xff0c;因此闪存写的速度要比…

达梦数据库学习笔记

架构、特点和基本概念 达梦数据库&#xff08;DM Database&#xff09;是中国达梦数据库有限公司自主研发的关系型数据库管理系统。它广泛应用于政府、金融、电信、能源等行业&#xff0c;具备高性能、高可靠性和高安全性的特点。 架构 达梦数据库的架构设计注重高性能和高可…

python-绘制五星红旗(非标准)

完整代码如下&#xff1a; #五星红旗&#xff08;非标准版&#xff09; from turtle import* import math from random import* tracer(0) penup() goto(-640,220) pendown() color(gold,gold) begin_fill() for i in range(5): fd(150) right(144) # 大五角星 penup(…

基于UDP的网络多人聊天室

UDP服务器 #include <myheader.h>//宏定义打印错误信息 #define PRINT_ERR(msg) \do \{ \printf("%S,%D,%S\n",__FI…

java单元测试:编写可测试性好的代码

写出可测试性好的代码是编写高质量软件的关键。以下是一些有助于提高代码可测试性的最佳实践&#xff1a; 1. 单一职责原则 (Single Responsibility Principle) 每个类或方法应只负责一个功能。这样可以让测试更容易集中于单一功能。 2. 依赖注入 (Dependency Injection) 通…

【一个糟糕的词:省流】

今日思考&#xff0c;博主分享&#x1f4dd;&#xff0c;原文如下&#xff0c; 我最近听到了一个特别糟糕的词叫省流。我甚至认为这个词可以用来衡量一个人的智商啊&#xff0c;我们可以把一个知识简单的分成三部分问题&#xff0c;答案思维方式就是这个答案是怎么推导出来的啊…

Python数据可视化(二)

Patches绘制几何图形 模块 patches 主要用来完成多边形的绘制工作。这些多边形都是以类&#xff08;Class&#xff09;的形式出现的&#xff0c; 主要包括圆&#xff08;Circle&#xff09;、椭圆&#xff08;Ellipse&#xff09;、矩形&#xff08;Rectangle&#xff09;、圆…

SFTP命令用法(上传和下载 )

sftp&#xff08;Secure File Transfer Protocol&#xff09;是SSH协议的一部分&#xff0c;用于在加密的SSH传输上访问、管理和传输文件。与传统的FTP协议相比&#xff0c;sftp提供了FTP的所有功能&#xff0c;但它更安全&#xff0c;更容易配置。不像SCP&#xff0c;它只支持…

【全开源】知识库文档系统源码(ThinkPHP+FastAdmin)

知识库文档系统源码&#xff1a;构建智慧知识库的基石 引言 在当今信息爆炸的时代&#xff0c;知识的有效管理和利用对于企业和个人来说至关重要。知识库文档系统源码正是为了满足这一需求而诞生的&#xff0c;它提供了一个高效、便捷的平台&#xff0c;帮助用户构建、管理、…

设计模式之创建型模式---原型模式(ProtoType)

文章目录 概述类图原型模式优缺点优点缺点 代码实现 概述 在有些系统中&#xff0c;往往会存在大量相同或者是相似的对象&#xff0c;比如一个围棋或者象棋程序中的旗子&#xff0c;这些旗子外形都差不多&#xff0c;只是演示或者是上面刻的内容不一样&#xff0c;若此时使用传…

Oblivion Desktop:一款强大的网络工具介绍

一款优秀的开源网络工具。 文章目录 Oblivion Desktop: 安全与隐私的网络工具软件背景开发背景 使用方法安装日常使用高级功能 总结 Oblivion Desktop: 安全与隐私的网络工具 软件背景 Oblivion Desktop 是一个由 BePass 团队开发的开源桌面应用&#xff0c;旨在为用户提供更…

【Qt】Qt组件设置背景图片

1. 方法1&#xff08;paintEvent方式&#xff09; 使用paintEvent()实现 1. .h文件中添加虚函数 protected:void paintEvent(QPaintEvent *event) override;添加虚函数方法&#xff1a; 选中父类&#xff0c;点击鼠标右键点击重构点击 Insert Virtual Funtion of Base Class…

NebulaGraph

文章目录 关于 NebulaGraph客户端支持安装 NebulaGraph关于 nGQLnGQL 可以做什么2500 条 nGQL 示例原生 nGQL 和 openCypher 的关系 Backup&Restore功能 导入导出导入工具导出工具 NebulaGraph ImporterNebulaGraph ExchangeNebulaGraph Spark ConnectorNebulaGraph Flink …

python中的可哈希和不可哈希

python 中的每一个对象都有一个哈希值&#xff0c;哈希值是一个固定长度的整数&#xff0c;它通常用于快速比较对象的相等性。 如果在对象的生命周期里该对象的哈希值从未改变&#xff0c;那么这个对象是可哈希的&#xff08;hashable&#xff09;&#xff0c;也称为不可变的。…

第一篇【传奇开心果系列】Python的跨平台开发工具beeware技术点案例示例:使用beeware实现跨平台开发,从hello world开始

传奇开心果博文系列 系列博文目录Python的跨平台开发工具beeware技术点案例示例系列 博文目录前言一、BeeWare套件主要功能介绍二、Toga相对于其他Python UI库具有的优势介绍三、使用toga开发安卓手机应用hello world步骤和示例代码四、使用toga写一个iOS 苹果手机应用hello wo…

【文末附gpt升级方案】亚马逊与Hugging Face合作:定制芯片低成本运行AI模型的创新探索

亚马逊与Hugging Face合作&#xff1a;定制芯片低成本运行AI模型的创新探索 摘要 本文探讨了亚马逊云部门与人工智能初创公司Hugging Face的合作&#xff0c;旨在通过定制计算芯片Inferentia2在亚马逊网络服务&#xff08;AWS&#xff09;上更低成本地运行数千个AI模型。文章首…

web前端之vue的生命周期、unmounted、onUnmounted、activated、deactivated、keep-alive

MENU 前言vue2vue3activated和deactivated 前言 在Vue.js中&#xff0c;组件生命周期钩子函数定义了在组件的不同阶段执行的操作。Vue 2.x和Vue 3.x之间的生命周期钩子函数有一些区别。 vue2 1、beforeCreate: 在实例初始化之后&#xff0c;数据观测(data observer)和event/wat…