封装通用mixins,在vue中实现a-table组件的可伸缩列(详细且使用便捷)

1、实现效果

 2、使用场景

  • vue2 + antd-vue 1.x版本
  • 由于antd-vue 1.x版本的组件库没有提供可伸缩列的功能,才需要我们手动开发
  • 在antd-vue 3.x版本以上的表格已经支持这个功能,不需要我们再去手动开发

3、话不多说,上代码

首先安装vue-draggable-resizable,版本2.1.0可以使用,其他版本未尝试

yarn add vue-draggable-resizable@2.1.0
or
npm i vue-draggable-resizable@2.1.0

src/mixins目录下建一个DraggableResizable.js

import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)export default {created() {this.componentsColumns = {header: {cell: (h, props, children) => {const { key, ...restProps } = propsconst col = this.columns.find((col) => {const k = col.dataIndex || col.keyreturn k === key})if (!col || !col.width) {return h('th', { ...restProps }, [...children])}const dragProps = {key: col.dataIndex || col.key,class: 'table-draggable-handle',attrs: {w: 10,x: col.width,z: 1,axis: 'x',draggable: true,resizable: false,},on: {dragging: (x, y) => {col.width = Math.max(x, 1)},},}const drag = h('vue-draggable-resizable', { ...dragProps })return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])},},}},computed: {// 动态获取scrollX,防止数组固定列的大小变化scrollX() {return this.columns.reduce((preVal, curVal) => {// console.log(preVal + curVal.width);return preVal + curVal.width}, 0)}}
}

页面中使用

import DraggableResizable from '@/mixins/DraggableResizable'
export default {mixins: [DraggableResizable],
}

绑定到a-table组件上,组件上新增:components="componentsColumns"和:scroll="{ x: scrollX }"

<a-table:loading="loading"bordered@change="handleTableChange":row-key="(record, index) => index":columns="columns":data-source="list":pagination="pagination":row-class-name="isRedRow"filtered:components="componentsColumns":scroll="{ x: scrollX }"
></a-table>

调整列配置项集合columns

  • 由于我封装的mixins中对当前页面中的columns做的操作,所以你表格中columns属性绑定的数据也应该叫做columns
  • width和dataIndex为必传项,如果你的width是字符串'100px',请改为数字类型100,因为涉及到某些计算
  • 当然如果某一列不想伸缩,可以不传dataIndex,但是width是必传哦,例如如下代码中的序号列
data() {return {columns: [{title: '序号',width: 65,customRender: (text, record, index, column) => {return index + 1},align: 'center',},{title: '订单编号',dataIndex: 'orderNumber',align: 'center',ellipsis: true,width: 200,},{title: '创建时间',dataIndex: 'createTime',customRender: (text) => (text ? text : '--'),align: 'center',ellipsis: true,width: 200,},{title: '创建人',dataIndex: 'createByName',customRender: (text) => (text ? text : '--'),align: 'center',ellipsis: true,width: 100},{title: '客户名称',dataIndex: 'clientName',customRender: (text) => (text ? text : '--'),align: 'center',ellipsis: true,width: 200,}] }  
}
最后是当前页面的css,如果是less或者scss记得带上/deep/或者::v-deep
/deep/.table-draggable-handle {/* width: 10px !important; */height: 100% !important;left: auto !important;right: -5px;cursor: col-resize;touch-action: none;border: none;position: absolute;transform: none !important;bottom: 0;
}
/deep/.resize-table-th {position: relative;
}

4、页面使用完整代码

<template><div><a-tablebordered@change="handleTableChange":columns="columns":data-source="list":pagination="pagination"filtered:components="componentsColumns":scroll="{ x: scrollX }"></a-table></div>
</template><script>
import DraggableResizable from '@/mixins/DraggableResizable'
export default {mixins: [DraggableResizable],data() {return {pagination: {current: 1,pageSize: 100,pageSizeOptions: ['10', '20', '50', '100', '200'],showQuickJumper: false,showSizeChanger: true,total: 0,},list: [],columns: [{title: '序号',width: 65,customRender: (text, record, index, column) => {return index + 1},align: 'center',},{title: '订单编号',dataIndex: 'orderNumber',customRender: (text, record) => (text ? (text + (record.divideOrderNumber || '')) : '--'),align: 'center',ellipsis: true,width: 200,},{title: '创建时间',dataIndex: 'createTime',customRender: (text) => (text ? text : '--'),align: 'center',ellipsis: true,width: 200,},{title: '创建人',dataIndex: 'createByName',customRender: (text) => (text ? text : '--'),align: 'center',ellipsis: true,width: 100},{title: '客户名称',dataIndex: 'clientName',customRender: (text) => (text ? text : '--'),align: 'center',ellipsis: true,width: 200,},{title: '操作',dataIndex: 'action',scopedSlots: {customRender: 'action'},align: 'center',width: 120,fixed: 'right'},],}},
}
</script>
<style lang="less" scoped>
/deep/.table-draggable-handle {/* width: 10px !important; */height: 100% !important;left: auto !important;right: -5px;cursor: col-resize;touch-action: none;border: none;position: absolute;transform: none !important;bottom: 0;
}
/deep/.resize-table-th {position: relative;
}
</style>
如果解决了你的问题点个赞吧^_^

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

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

相关文章

语义分割:从早期探索到深度学习的突破

语义分割&#xff1a;从早期探索到深度学习的突破 语义分割的端倪&#xff1a;从早期探索到深度学习的突破引言早期技术&#xff1a;图像处理与模式识别边缘检测区域生长图割(Graph Cut)聚类方法 深度学习的兴起&#xff1a;CNN革命2012年 AlexNet的突破全卷积网络&#xff08;…

6、基于机器学习的预测

应用机器学习的任何预测任务与这四个策略。 文章目录 1、简介1.1定义预测任务1.2准备预测数据1.3多步预测策略1.3.1多输出模型1.3.2直接策略1.3.3递归策略1.3.4DirRec 策略2、流感趋势示例2.1多输出模型2.2直接策略1、简介 在第二课和第三课中,我们将预测视为一个简单的回归问…

vue核心知识点

一、Vue基础知识点总结 开发vue项目的模式有两种&#xff1a; 基于vue.js&#xff0c;在html中引入vue.js&#xff0c;让vue.js管理div#app元素。基于脚手架环境&#xff1a;通过vue脚手架环境可以方便的创建一个通用的vue项目框架的模板&#xff0c;在此基础之上开发vue项目…

基于SpringBoot Vue学生信息管理

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

Redis -- 单线程模型

失败是成功之母 ——法国作家巴尔扎克 目录 单线程模型 Redis为什么这么快 单线程模型 redis只使用一个线程&#xff0c;处理所有的命令请求&#xff0c;不是说redis服务器进场内部真的就只有一个线程&#xff0c;其实也有多个线程&#xff0c;那就是处理网络和io的线程。 R…

图像去噪——SpatiallyAdaptiveSSID网络推理测试(详细图文教程)

SpatiallyAdaptiveSSID 是一种有效的图像去噪方法&#xff0c;它通过自适应地处理不同区域的噪声&#xff0c;能够在保持图像细节的同时&#xff0c;有效地去除噪声。 目录 一、SpatiallyAdaptiveSSID网络简介二、源码包准备2.1 测试集2.2 模型权重文件 三、测试环境四、推理测…

C#,斯特林数(Stirling Number)的算法与源代码

1 斯特林数 在组合数学&#xff0c;斯特林数可指两类数&#xff0c;第一类斯特林数和第二类斯特林数&#xff0c;都是由18世纪数学家James Stirling提出的。它们自18世纪以来一直吸引许多数学家的兴趣&#xff0c;如欧拉、柯西、西尔沃斯特和凯莱等。后来哥本哈根&#xff08;…

氢气泄漏检测仪使用方法:守护安全,从细节开始

随着科技的发展&#xff0c;我们的生活和工作环境中充满了各种潜在的危险。其中&#xff0c;氢气作为一种清洁能源&#xff0c;其使用日益广泛&#xff0c;但同时也带来了泄漏的风险。为了确保我们的安全&#xff0c;了解并正确使用氢气泄漏检测仪至关重要。下面将详细介绍氢气…

用户界面(UI)、用户体验(UE)和用户体验(UX)的差异

对一个应用程序而言&#xff0c;UX/UE (user experience) 设计和 UI (user interface) 设计非常重要。UX设计包括可视化布局、信息结构、可用性、图形、互动等多个方面。UI设计也属于UX范畴。正是因为三者在一定程度上具有重叠的工作内容&#xff0c;很多从业多年的设计师都分不…

[香橙派开发系列]使用蓝牙和手机进行信息的交换

文章目录 前言一、HC05蓝牙模块1.HC05概述2.HC05的连接图3.进入HC05的命令模式4.常用的AT指令4.1 检查AT是否上线4.2 重启模块4.3 获取软件版本号4.4 恢复默认状态4.5 获取蓝牙的名称4.6 设置蓝牙模块的波特率4.7 查询蓝牙的连接模式4.8 查询模块角色 5.连接电脑6.通过HC05发送…

【大厂AI课学习笔记】1.4 算法的进步(1)

2006年以来&#xff0c;以深度学习为代表的机器学习算法的发展&#xff0c;启发了人工智能的发展。 MORE&#xff1a; 自2006年以来&#xff0c;深度学习成为了机器学习领域的一个重要分支&#xff0c;引领了人工智能的飞速发展。作为人工智能专家&#xff0c;我将阐述这一时期…

算法——A/算法通识

目录 一、复杂度分析 A/时间复杂度 B/空间复杂度 C/分析技巧 二、枚举分析 A/枚举算法介绍 B/解空间的类型 C/循环枚举解空间 三、模拟算法 四、递归 A/递归介绍 递归的两个关键要素&#xff1a; B/递归如何实现 C/递归和循环的比较 一、复杂度分析 A/时间复杂度…

腾讯mini项目总结-指标监控服务重构

项目概述 本项目的背景是&#xff0c;当前企业内部使用的指标监控服务的方案的成本很高&#xff0c;无法符合用户的需求&#xff0c;于是需要调研并对比测试市面上比较热门的几款开源的监控方案&#xff08;选择了通用的OpenTelemetry协议&#xff1a;Signoz&#xff0c;otel-…

grafana安装DevOpsProdigy KubeGraf 1.5.2

安装DevOpsProdigy KubeGraf需要安装kube-state-metrics 官方地址&#xff1a;https://github.com/kubernetes/kube-state-metrics/tree/release-2.10/examples/standard 查看k8s版本和kube-state-metrics对应版本&#xff1a; [rootmaster1 kube-state-metrics]# ll 总用量 …

Elasticsearch:Geoshape query

Geoshape 查询可以用于过滤使用 geo_shape 或 geo_point 类型索引的文档。 geo_shape 查询使用与 geo_shape 或 geo_point 映射相同的索引来查找具有与查询形状相关的形状的文档&#xff0c;并使用指定的空间关系&#xff1a;相交&#xff08;intersect&#xff09;、包含(con…

Linux 命令 —— top

Linux 命令 —— top 相对于 ps 是选取一个时间点的进程状态&#xff0c;top 则可以持续检测进程运行的状态。使用方式如下&#xff1a; 用法&#xff1a; top [-d secs] | [-p pid] 选项与参数&#xff1a; -d secs&#xff1a;整个进程界面更新 secs 秒。默认是 5 5 5 秒。…

Tomcat 部署项目时 war 和 war exploded区别

在 Tomcat 调试部署的时候&#xff0c;我们通常会看到有下面 2 个选项。 是选择war还是war exploded 这里首先看一下他们两个的区别&#xff1a; war 模式&#xff1a;将WEB工程以包的形式上传到服务器 &#xff1b;war exploded 模式&#xff1a;将WEB工程以当前文件夹的位置…

安泰前置微小信号放大器工作原理是什么

前置微小信号放大器是电子电路中的一种重要组件&#xff0c;主要用于放大输入信号中的微小电压。这种放大器的工作原理涉及到电子器件的特性和基本电路理论。以下是前置微小信号放大器的工作原理的详细解释&#xff1a; 前置微小信号放大器通常用于增强输入信号&#xff0c;以便…

YOLOv8-Segment C++

YOLOv8-Segment C https://github.com/triple-Mu/YOLOv8-TensorRT 这张图像是运行yolov8-seg程序得到的结果图&#xff0c;首先是检测到了person、bus及skateboard(这个是检测错误&#xff0c;将鞋及其影子检测成了滑板&#xff0c;偶尔存在错误也属正常)&#xff0c;然后用方…

2024/2/1学习记录

echarts 为柱条添加背景色&#xff1a; 若想设置折线图的点的样式&#xff0c;设置 series.itemStyle 指定填充颜色就好了&#xff0c;设置线的样式设置 lineStyle 就好了。 在折线图中倘若要设置空数据&#xff0c;用 - 表示即可&#xff0c;这对于其他系列的数据也是 适用的…