vue管理系统列表行按钮过多, 封装更多组件

管理系统table列表操作列, 随着按钮的数量越来越多会不断加宽操作列, 感觉很不好, 对此我封装了这个自动把多余的按钮放到更多菜单下

MoreOperation/index.vue
menu组件我这是ant的, 可以自行替换为其他框架的

<template><div class="table-operations-group"><template v-if="btns"><div class="option-btn-wrap" v-for="(item, index) in outerBtns" :key="index" @click="clickBtn(item)" :class="{ 'disabled': item.disabled === true }"><slot v-if="item.customRender" :name="item.customRender" v-bind="item"><div class="my-text-btn">{{ item.name }}</div></slot><div v-else class="my-text-btn">{{ item.name }}</div></div></template><template v-if="!btns"><div class="option-btn-wrap" v-for="(item, index) in outerBtns" :key="index" @click="clickBtn(item)" :class="{ 'disabled': item.disabled === true }"><component :is="slotNode(item.vnode)" /></div></template><div class="option-btn-wrap" v-if="moreBtns.length > 0"><a-dropdown><div class="my-text-btn">更多<a-icon type="down" /></div><a-menu slot="overlay" @click="dropdownMenu"><a-menu-item v-for="(item, index) in moreBtns" :key="index" :disabled="item.disabled">{{ item.name }}</a-menu-item></a-menu></a-dropdown></div></div>
</template><script>
/*** MoreOperation 组件* 1. 配置模式* 2. slot模式* @author chengxg* @since 2023-09-15*/let weekTableMap = new WeakMap()
import OperationItem, { MoreOperationItemProp } from "./OperationItem.vue"// 根据模版创建对象
function createObjByTpl(obj, tpl) {let newObj = {}for (let f in tpl) {if (typeof obj[f] === 'undefined') {newObj[f] = tpl[f]} else {newObj[f] = obj[f]}}return newObj
}
export { OperationItem }export default {name: 'MoreOperation',comments: {},props: {// 表格所有数据tableData: {type: Array,default: null},// 表格行数据row: {type: Object,required: true,default: null},// 配置模式 所有的按钮btns: {type: Array,// [MoreOperationItemProp]default: null},// 外边的按钮数量outerBtnNum: {type: Number,default: 2}},provide() {return {'moreOperations': this};},data() {return {items: []}},computed: {activeBtns() {let btns = this.btns || this.items || []return btns.filter((item) => {if (typeof item.disabled === 'function') {item.disabled = item.disabled(this.row, item.params)}if (typeof item.show === 'function') {return item.show(this.row, item.params)}return true})},outerBtns() {if (this.activeBtns.length <= this.outerBtnNum + 1) {return this.activeBtns}return this.activeBtns.slice(0, this.outerBtnNum)},moreBtns() {if (this.activeBtns.length <= this.outerBtnNum + 1) {return []}return this.activeBtns.slice(this.outerBtnNum)}},watch: {},created() {this.updateSlotBtns()this.autoCalcMaxWidth()this.$watch(() => {return this.row}, (newVal, oldVal) => {this.$nextTick(() => {this.updateSlotBtns()this.$nextTick(() => {this.autoCalcMaxWidth()})})})},methods: {// 计算当前列最大宽度autoCalcMaxWidth() {if (!this.row) {return}let width = 0for (let item of this.outerBtns) {width += item.width}// more 宽度60if (this.moreBtns.length > 1) {width += 60}this.row.btnsMaxWidth = widththis.calcOperationWidth()},// 计算表格操作列的最大宽度calcOperationWidth() {let tableData = this.tableData || this.$parent.tableDataif (!tableData) {return}if (weekTableMap[tableData]) {clearTimeout(weekTableMap[tableData])}weekTableMap[tableData] = setTimeout(() => {let maxWidth = 120;for (const row of tableData) {if (row.btnsMaxWidth > maxWidth) {maxWidth = row.btnsMaxWidth;}}let operatorColumnWidth = maxWidth + 10;this.$emit("update:operatorWidth", operatorColumnWidth)// 使用vxeTable组件库 自动调整最大操作列 列宽if (this.$parent.$parent.recalculate) {this.$parent.$parent.recalculate(true)}}, 10)},clickBtn(item) {item.click && item.click(this.row, item.params)},dropdownMenu(command) {let btnItem = this.moreBtns[command.key]if (btnItem && typeof btnItem.click === 'function') {btnItem.click(this.row, btnItem.params)}},updateSlotBtns() {if (!this.btns) {if (this.$slots.default) {this.items = this.$slots.default.filter((item) => {if (item && item.componentOptions && item.componentOptions.tag == 'OperationItem') {return true}return false}).map((item) => {let obj = createObjByTpl(item.componentOptions.propsData, MoreOperationItemProp)if (item.componentOptions.propsData.item) {Object.assign(obj, item.componentOptions.propsData.item)}obj.vnode = itemreturn obj})} else {this.items = []}}},slotNode(vnode) {return {render(h) {return vnode;}}},},mounted() {}
}
</script><style lang="scss">
.table-operations-group {display: flex;justify-content: flex-start;align-items: center;.option-btn-wrap {display: flex;justify-content: flex-start;align-items: center;cursor: pointer;user-select: none;&::after {display: block;content: ' ';width: 0;height: 14px;border-left: 1px solid #eeeeee;margin: 0 4px;}&:last-child {&::after {display: none;}}&.disabled {pointer-events: none;.my-text-btn {cursor: no-drop;color: #bfc2cc;&:active {background: none;}}}}.my-text-btn {display: inline-flex;justify-content: center;align-items: center;cursor: pointer;user-select: none;border-radius: 1px;padding: 3px 5px;height: 30px;vertical-align: middle;font-size: 14px;font-weight: 400;color: #3471ff;&:active {background: rgba(29, 111, 255, 0.06);}&.disabled {cursor: no-drop;color: #bfc2cc;&:active {background: none;}}.btn-icon {i,&.el-icon,&.icon-svg,&.svg-icon {display: inline-flex;justify-content: center;align-items: center;margin-right: 4px;width: 12px;height: 12px;}}.btn-icon-right {i,&.el-icon,&.icon-svg,&.svg-icon {display: inline-flex;justify-content: center;align-items: center;margin-right: 4px;width: 12px;height: 12px;}}}
}
</style>

MoreOperation/OperationItem.vue

<script>
export const MoreOperationItemProp = {name: "", // 按钮名width: 50, // 按钮所占的宽度params: null, // show, click, disabled 传入的第二个参数// 是否显示回调show: (row, params) => {return true},// 点击回调click: (row, params) => {},// 是否禁用, 可以为函数disabled: false,// 配置模式下的自定义渲染slotcustomRender: ""
}export default {name: 'OperationItem',props: {name: {type: String,default: ""},width: {type: Number,default: 50},params: {default: null},show: {type: Function,default: null},click: {type: Function,default: null},disabled: {type: [Boolean, Function],default: false},// 对象形式赋值item: {type: Object,default: null // MoreOperationItemProp}},data() {return {}},computed: {},watch: {},created() {},render(h) {if (!this.$slots.default) {let btnName = this.nameif (this.item && this.item.name) {btnName = this.item.name}return h('div', {class: 'my-text-btn'}, btnName)}return this.$slots.default},methods: {},beforeDestroy() {}
}
</script>

使用方法:

实现了配置模式和slot模式, slot模式支持v-if来控制按钮显示隐藏

            <!-- 1. 配置模式 --><MoreOperation :btns="operationBtns" :row="row" :operatorWidth.sync="operatorColumnWidth"><template #del="item"><div class="my-text-btn" style="color:red;">{{ item.name }}</div></template></MoreOperation><!-- 2. slot模式 --><MoreOperation :row="row" :operatorWidth.sync="operatorColumnWidth"><OperationItem name="详情" :click="operationBtns[0].click"></OperationItem><OperationItem v-if="operationBtns[1].show(row)" :width="80" name="历史记录" :click="operationBtns[1].click"></OperationItem><OperationItem v-if="operationBtns[2].show(row)" :width="50" name="删除" :click="operationBtns[2].click"><div class="my-text-btn" style="color:red;">删除</div></OperationItem><OperationItem :item="operationBtns[3]"></OperationItem><OperationItem :item="operationBtns[4]"></OperationItem><OperationItem v-if="operationBtns[5].show(row)" :width="50" name="禁用" :click="operationBtns[5].click"></OperationItem><OperationItem :item="operationBtns[6]"></OperationItem></MoreOperation>
import MoreOperation, { OperationItem } from "@/components/MoreOperation/index.vue"export default {name: "example",components: { MoreOperation, OperationItem },data() {return {loading: false,searchForm: {name: "",},page: {pageNum: 1,pageSize: 20,total: 0,}, // 分页信息tableData: [],operatorColumnWidth: 120,operationBtns: [{name: "详情",width: 45,params: null,show: (row, params) => {return Math.random() > 0.1},click: (row, params) => {console.log("click 详情")},disabled: false,customRender: ""}, {name: "删除",width: 45,params: null,show: (row, params) => {return Math.random() > 0.5},click: (row, params) => {console.log("click 删除")},disabled: false,customRender: "del",}, {name: "历史记录",width: 80,show: (row) => {return Math.random() > 0.8},click: (row) => {console.log("click 历史记录")},}, {name: "修改",width: 45,show: (row) => {return Math.random() > 0.5},click: (row) => {console.log("click 修改")},disabled: true}, {name: "撤回",width: 45,show: (row) => {return Math.random() > 0.5},click: (row) => {console.log("click 撤回")}}, {name: "禁用",width: 45,show: (row) => {return Math.random() > 0.5},click: (row) => {console.log("click 禁用")}}, {name: "流程跟踪",width: 80,show: (row) => {return Math.random() > 0.8},click: (row) => {console.log("click 流程跟踪")},disabled: true}],};},created() {},mounted() {this.onSearch()},methods: {onSearch(page = {}) {if (this.loading) {return}let params = {...this.searchForm,...this.page,...page,}this.loading = truethis.fetchData(params).then((data) => {this.loading = falsethis.tableData = data.listupdatePageInfo(this.page, data)this.showBtn = truesetTimeout(() => {// this.showBtn = false}, 2000)}).catch((err) => {this.loading = falsethis.tableData = []})},fetchData(params) {return new Promise((resolve, reject) => {let data = dataListPage({name: "@cname","sex|1": ["男", "女"],age: "@natural(1, 100)",city: "@city",hobby: "@csentence(2, 10)",createName: "@cname",createTime: "@date",}, params).dataconsole.log(data)resolve(data)})},}
}

效果图

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

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

相关文章

CSS 实现祥云纹理背景

CSS 实现祥云纹理背景

&#x1fab4; 背景 最近掘金出来一个中秋创意活动&#xff0c;我准备参加一下。作品方向选择用纯css做一个中秋贺卡&#xff0c;其中有一些中秋的元素和一些简单的动画&#xff0c;而贺卡背景的实现就是本文要讲的内容。 中秋贺卡成果图&#xff08;生成gif有点失真&#x1f6…
阅读更多...
网站有反爬机制就爬不了数据？那是你不会【反】反爬

网站有反爬机制就爬不了数据？那是你不会【反】反爬

目录 前言 一、什么是代理IP 二、使用代理IP反反爬 1.获取代理IP 2.设置代理IP 3.验证代理IP 4.设置代理池 5.定时更新代理IP 三、反反爬案例 1.分析目标网站 2.爬取目标网站 四、总结 前言 爬虫技术的不断发展&#xff0c;使得许多网站都采取了反爬机制&#xff…
阅读更多...
Python150题day08

Python150题day08

2.基础语法篇 2.1 if 条件句 ①单个条件分支 使用input函数接收用户的输入&#xff0c;如果用户输入的整数是偶数&#xff0c;则使用print函数输出"你输入的整数是:{value],它是偶数”&#xff0c;[value]部分要替换成用户的输入。 解答: value input("请输⼊⼀…
阅读更多...
ESP8266 WiFi物联网智能插座—项目简介

ESP8266 WiFi物联网智能插座—项目简介

目录 1、项目背景 2、设备节点功能 3、上位机功能 物联网虽然能够使家居设备和系统实现自动化、智能化管理&#xff0c;但是依然需要依靠更为先进的终端插座作为根本保障&#xff0c;插座是所有家用电器需要使用的电源设备&#xff0c;插座的有序智能管理&#xff0c;对于实…
阅读更多...
Ubuntu系统下载及安装教程

Ubuntu系统下载及安装教程

史上最全最新Ubuntu安装教程&#xff08;图文&#xff09; - 知乎 (说明&#xff1a;本教程介绍的是安装DeskTop版的系统) 1.官网下载镜像 官方网址: https://ubuntu.com/#download进入官网后会有最新版本的镜像下载地址&#xff0c;如果需要下载最新版本&#xff0c;直接点…
阅读更多...
Openresty(二十二)ngx.balance和balance_by_lua终结篇

Openresty(二十二)ngx.balance和balance_by_lua终结篇

一 灰度发布铺垫 ① init_by_lua* init_by_lua init_by_lua_block 特点: 在openresty start、reload、restart时执行,属于master init 阶段机制&#xff1a; nginx master 主进程加载配置文件时&#xff0c;运行全局Lua VM级别上的参数指定的Lua代码场景&#xff1a; …
阅读更多...
SadTalker 让图片说话

SadTalker 让图片说话

参考&#xff1a;https://github.com/OpenTalker/SadTalker 其他类似参考&#xff1a;https://www.d-id.com/ 输入图片加音频产生2d视频 安装使用 1、拉取github&#xff0c;下载对应安装库 2、下载对应模型baidu网盘 新建checkpoints&#xff0c;把下载sadtalker里模型拷贝进…
阅读更多...
人源化抗体的改造方式及其优势

人源化抗体的改造方式及其优势

抗体是一类能与抗原特异性结合的免疫球蛋白&#xff0c;作为免疫系统中的重要组成部分&#xff0c;在许多疾病的预防和治疗中发挥着重要作用。抗体治疗的最早应用可以追溯到中国人接种“人痘”预防天花的记载算起&#xff0c;国际上一般公认的人痘接种术最早起源于中国公元10世…
阅读更多...
基于TensorFlow+CNN+协同过滤算法的智能电影推荐系统——深度学习算法应用(含微信小程序、ipynb工程源码)+MovieLens数据集（六）

基于TensorFlow+CNN+协同过滤算法的智能电影推荐系统——深度学习算法应用(含微信小程序、ipynb工程源码)+MovieLens数据集（六）

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 模型训练1&#xff09;数据集分析2&#xff09;数据预处理3&#xff09;模型创建4&#xff09;模型训练5&#xff09;获取特征矩阵 2. 后端Django3. 前端微信小程序1&#xff09;小程序全局配置文件2&#xff09…
阅读更多...
电容笔有必要买最好的吗？开学好用iPad手写笔推荐

电容笔有必要买最好的吗？开学好用iPad手写笔推荐

在iPad平板的热卖下&#xff0c;一些学生开始从传统的纸和笔的教学模式转向无纸化教学。因此&#xff0c;原来的Apple Pencil也成了热门话题&#xff0c;不少人都对这款售价近千元的电容笔产生了浓厚的兴趣。我认为对于职业画师来说&#xff0c;这一点非常重要&#xff0c;因为…
阅读更多...
开源项目-SeaTunnel-UI数据集成系统

开源项目-SeaTunnel-UI数据集成系统

哈喽，大家好，今天给大家带来一个开源项目-SeaTunnel-UI数据集成系统 系统主要有任务配置，任务实例，数据源，虚拟表，用户管理等功能 登录 数据源 mysql数据源配置参数说明 kafka参数配置 mysqlcdc配置参数说明 虚拟表
阅读更多...
区块链交易平台开发流程

区块链交易平台开发流程

随着区块链技术的日益发展&#xff0c;越来越多的金融机构和创业公司开始探索开发区块链交易平台的潜力。以下是一篇关于区块链交易平台开发流程的指南。 一、理解区块链技术 在开发区块链交易平台之前&#xff0c;必须深入理解区块链技术的内在机制和原理。区块链是一…
阅读更多...
Linux Kernel 之四 移植过程详解、STM32F769I-EVAL 开发板适配

Linux Kernel 之四 移植过程详解、STM32F769I-EVAL 开发板适配

在之前的博文 Linux Kernel 之一 完整嵌入式 Linux 环境、构建工具、编译工具链、CPU 体系架构 中说了要一步步搭建整个嵌入式 Linux 运行环境&#xff0c;今天主要学习一下将 Linux 内核适配 STM32F769I-EVAL 开发板。 源码 文中涉及的源代码均放到了我个人的 Github 上&…
阅读更多...
SmartNews 基于 Flink 的 Iceberg 实时数据湖实践

SmartNews 基于 Flink 的 Iceberg 实时数据湖实践

摘要&#xff1a;本文整理自 SmartNews 数据平台架构师 Apache Iceberg Contributor 戢清雨&#xff0c;在 Flink Forward Asia 2022 实时湖仓专场的分享。本篇内容主要分为五个部分&#xff1a; SmartNews 数据湖介绍基于 Icebergv1 格式的数据湖实践基于 Flink 实时更新的数据…
阅读更多...
C | atexit函数

C | atexit函数

C | atexit函数 文章目录 C | atexit函数atexit区别进程终止的方式Reference 欢迎关注公众号“三戒纪元” atexit main函数是整个程序的入口&#xff0c;但是其实可以在内核中可以使用链接器来设置程序的开始地方。 当内核使用⼀个exec函数执行C程序时&#xff0c;在调⽤main…
阅读更多...
BI系统上的报表怎么导出来？附方法步骤

BI系统上的报表怎么导出来？附方法步骤

在BI系统上做好的数据可视化分析报表&#xff0c;怎么导出来给别人看&#xff1f;方法有二&#xff0c;分别是1使用报表分享功能&#xff0c;2使用报表导出功能。下面就以奥威BI系统为例&#xff0c;简明扼要地介绍这两个功能。 1、报表分享功能 作用&#xff1a; 让其他同事…
阅读更多...
Android查看公钥与MD5

Android查看公钥与MD5

参考&#xff1a;填写App特征信息_备案-阿里云帮助中心 安卓应用获取App特征信息指导 包名、公钥和签名MD5获取方式有多种&#xff0c;本文以使用JadxGUI工具获取为例。 下载JadxGUI工具&#xff1a;GitHub - skylot/jadx: Dex to Java decompiler下载安装完成后&#xff0c;使…
阅读更多...
【C++】String类基本接口介绍及模拟实现（多看英文文档）

【C++】String类基本接口介绍及模拟实现（多看英文文档）

string目录 如果你很赶时间&#xff0c;那么就直接看我本标题下的内容即可&#xff01;&#xff01; 一、STL简介 1.1什么是STL 1.2STL版本 1.3STL六大组件 1.4STL重要性 1.5如何学习STL 二、什么是string&#xff1f;&#xff1f;&#xff08;本质上是一个类&#xff0…
阅读更多...
模式分类与“组件协作模式”

模式分类与“组件协作模式”

1. GOF-23 模式分类 从目的来看&#xff1a; 创建型&#xff08;Creational&#xff09;模式&#xff1a;将对象的部分创建工作延迟到子类或者其他对象&#xff0c;从而应对需求变化为对象创建时具体类型实现引来的冲击。结构型&#xff08;Structural&#xff09;模式&#…
阅读更多...
爱分析《商业智能最佳实践案例》

爱分析《商业智能最佳实践案例》

近日&#xff0c;国内知名数字化市场研究咨询机构爱分析发布《2023爱分析商业智能最佳实践案例》&#xff0c;此评选活动面向落地商业智能的各行企业和商业智能厂商&#xff0c;以第三方专业视角深入调研&#xff0c;评选出具有参考价值的创新案例。永达汽车集团与数聚股份合作…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023