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;而移动云有着独特的优势和广…

1.存储部分

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

【一个糟糕的词:省流】

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

Python数据可视化(二)

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

【全开源】知识库文档系统源码(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的跨平台开发工具beeware技术点案例示例:使用beeware实现跨平台开发,从hello world开始

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

RDD介绍

RDD设计背景 在实际应用中,存在许多迭代式计算,这些应用场景的共同之处是 : 不同计算阶段之间会重用中间结果,即一个阶段的输出结果会作为下一个阶段的输入. 而目前的MapReduce框架都是把中间结果写入到HDFS中,带来了大量的数据复制、磁盘IO和序列化开销; 如果能将结果保存在内…

性能大爆炸!为你的Matomo换一个高性能的环境!

随着我的 Matomo 越来越大&#xff0c;功能需求的增多&#xff0c;插件也变得越来越多&#xff0c;使用传统的LNMP架构或者LAMP架构都会发现性能正在急剧下级&#xff0c;为此&#xff0c;我们发现了使用FrankenPHP&#xff08;以下简称FPHP&#xff09;的方案 首先&#xff0…

Android kotlin协程

说明 可代替线程整异步可控制&#xff0c;灵活 &#xff08;控制优先级&#xff0c;内存占用等&#xff09;速度快 效率高有数量上限 使用 runBlocking 一般用于测试 不建议使用GlobalScope.launch 全局的 生命周期跟随application 不建议使用CoroutineScope(job) 用 基本使…

GEE批量导出逐日、逐月、逐季节和逐年的遥感影像(以NDVI为例)

影像导出 1.逐日数据导出2.逐月数据导出3.季节数据导出4.逐年数据导出 最近很多小伙伴们私信我&#xff0c;问我如何高效导出遥感数据&#xff0c;从逐日到逐季度&#xff0c;我都有一套自己的方法&#xff0c;今天就来和大家分享一下&#xff01;   &#x1f50d;【逐日导出…

Scala 入门介绍和环境搭建

一、简介 Scala 是一门以 Java 虚拟机&#xff08;JVM&#xff09;为运行环境并将面向对象和函数式编程的最佳特性结合在一起的静态类型编程语言 (静态语言需要提前编译&#xff0c;如&#xff1a;Java、c、c 等&#xff0c;动态语言如&#xff1a;js)Scala 是一门多范式的编程…

【介绍下Pwn,什么是Pwn?】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

冯喜运:5.25黄金价格和原油价格加速看跌?未来如何走势?

【黄金消息面分析】&#xff1a;本周黄金市场经历剧烈波动&#xff0c;金价创下五个半月来最糟糕的单周表现&#xff0c;尽管周五因美元下跌小幅回升。美联储的鹰派立场和美国经济数据强劲削弱了降息预期&#xff0c;导致金价承压。然而&#xff0c;分析师对未来金价走势看法不…

Rolla‘s homework:Image Processing with Python Final Project

对比学习Yolo 和 faster rcnn 两种目标检测 要求 Image Processing with Python Final Project Derek TanLoad several useful packages that are used in this notebook:Image Processing with Python Final Project Project Goals: • Gain an understanding of the object …

使用git生成SSH公钥,并设置SSH公钥

1、在git命令行里输入以下命令 ssh-keygen -t rsa 2、按回车&#xff0c;然后会看到以下字眼 Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/xxx/.ssh/id_rsa) 例&#xff1a; 3、继续回车&#xff0c;然后会看到以下字眼 Enter…