当前位置: 首页 > news >正文

and design vue表格列宽度拖拽,vue-draggable-resizable插件使用

and design vue2版的table表格不能拖拽列的宽度,通过vue-draggable-resizable插件实现
我用的是and design 1.7.8的版本,先下插件

yarn add vue-draggable-resizable@2.1.0

我这版本的and design用最新3.0.0以上的插件会有问题,实现不了效果,换了低版本就没问题了
官方也有教使用方法,但会报错,按照官方的来写,需要把ResizeableTitle改成resizeableTitle这样就解决了最开始的报错
在这里插入图片描述
官方使用地址
下面是我封装的table公用组件,但是这样弄问题很多,在表格里加一下操作的时候很容易有问题,所以谨慎用这玩意

<template><div class="tableCommon-wrapper"><a-tablev-if="istrue":expandIconColumnIndex="expandIconColumnIndex" :expandIconAsCell="expandIconAsCell":defaultExpandAllRows="defaultExpandAllRows" :columns="columns" :dataSource="data" :loading="loading":indentSize="indentSize" :pagination="pagination" :row-selection="rowSelection":childrenColumnName="childrenColumnName" size="middle" :customHeaderRow="tableHeader" @change="handleTableChange":rowKey="rowkey" :scroll="scroll" :bordered="bordered" :hideDefaultSelections="hideDefaultSelections":components="components"><template slot-scope="text, record, index" :slot="slot"v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender')"><slot :name="slot" v-bind="{ text, record, index }"></slot></template></a-table></div>
</template><script>
import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);export default {name: 'ttable',props: {childrenColumnName: {type: String},rowkey: {type: String},tableHead: {type: Array,required: true},tableData: {type: Array,required: true},loading: {type: Boolean,default: false},indentSize: {// eslint-disable-next-line vue/require-prop-type-constructortype: Boolean | Number},pagination: {// eslint-disable-next-line vue/require-prop-type-constructortype: Boolean | Object},rowSelection: {type: Object},scroll: {type: Object,// default:()=> ({x: 1200, y: 600}) ,},expandIconAsCell: {type: Boolean},expandIconColumnIndex: {type: Number},size: {// eslint-disable-next-line vue/require-prop-type-constructortype: String | Number},bordered: {type: Boolean,default: true},defaultExpandAllRows: {type: Boolean,default: false},hideDefaultSelections: {type: Boolean,default: false}},data() {return {data:[],columns:[],istrue:false,}},watch:{tableHead(newdata){console.log('表格头部',newdata)this.columns = JSON.parse(JSON.stringify(newdata));},tableData(newdata){console.log('表格数据',newdata)this.data = JSON.parse(JSON.stringify(newdata));}},mounted(){this.init()},methods: {init(){console.log('阿里嘎多',this.tableHead)const draggingMap = {};this.columns = JSON.parse(JSON.stringify(this.tableHead));// this.columns = columns;this.data = JSON.parse(JSON.stringify(this.tableData));this.columns.forEach(col => {draggingMap[col.key] = col.width;});const draggingState = Vue.observable(draggingMap);const that = this;this.components = {header: {cell: (h, props, children) => {let thDom = null;const { key, ...restProps } = props;const col = that.columns.find(col => {const k = col.dataIndex || col.key;return k === key;});if (!col.width) {return <th {...restProps}>{children}</th>;}const onDrag = (x, y) => {draggingState[key] = 0;col.width = Math.max(x, 1);};const onDragstop = () => {draggingState[key] = thDom.getBoundingClientRect().width;};return (<th{...restProps}v-ant-ref={r => (thDom = r)}width={col.width}class="resize-table-th">{children}<vue-draggable-resizablekey={col.key}class="table-draggable-handle"w={10}x={draggingState[key] || col.width}z={1}axis="x"draggable={true}resizable={false}onDragging={onDrag}onDragstop={onDragstop}/></th>);}}};this.istrue=true;console.log('来阿拉啦啦啦',this.components)},tableHeader(column) {// console.log("column",column);column.forEach((e, index) => {column[index].className = 'table-thead';});},handleTableChange(val) {console.log("valllsadlalsdlsa:",val);this.$emit('changeCurrent', val.current);}}
}
</script><style lang='scss'>
.resize-table-th {position: relative;.table-draggable-handle {height: 100% !important;bottom: 0;left: auto !important;right: -5px;cursor: col-resize;touch-action: none;}
}::v-deep .ant-table-thead>tr>th {background: #f6f6f6;height: 50px;font-family: PingFang SC-Medium, PingFang SC;
}::v-deep .ant-table-tbody {background-color: #ffffff;
}::v-deep .ant-table-header-column .ant-table-column-title {font-size: 15px;font-weight: bold;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;
}
</style>

相关文章:

and design vue表格列宽度拖拽,vue-draggable-resizable插件使用

and design vue2版的table表格不能拖拽列的宽度&#xff0c;通过vue-draggable-resizable插件实现 我用的是and design 1.7.8的版本&#xff0c;先下插件 yarn add vue-draggable-resizable2.1.0我这版本的and design用最新3.0.0以上的插件会有问题&#xff0c;实现不了效果&a…...

使用hexo搭建个人博客

很早之前使用hexo和github建了个人博客。搭建的流程一直没有梳理&#xff0c;中间换过几次机器&#xff0c;每次都得重新配置一遍&#xff0c;需要重新学些。最近电脑坏了&#xff0c;原始的数据没有导出来&#xff0c;先把以前文章写个文件占个位置&#xff0c;后面慢慢补吧&a…...

java geotool构建地理点线面

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云/阿里云/华为云/51CTO&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互…...

C# 中 Grpc服务端调用客户端方法

在 gRPC 中&#xff0c;服务端通常不直接调用客户端的方法&#xff0c;因为 gRPC 的设计模型是服务端提供服务&#xff0c;客户端调用服务。通常情况下&#xff0c;服务端和客户端之间是解耦的&#xff0c;服务端只提供服务端点&#xff0c;客户端通过这些端点发起请求。 不过…...

Arthas相关命令

官方网站&#xff1a;命令列表 | arthas 也可以用idea的插件arthas-idea的插件根据你想定位的代码生成命令 jvm 相关 dashboard - 当前系统的实时数据面板getstatic - 查看类的静态属性heapdump - dump java heap, 类似 jmap 命令的 heap dump 功能jvm - 查看当前 JVM 的信息l…...

2024年江苏省职业院校技能大赛 移动应用与开发中职赛项规程

2024年江苏省职业院校技能大赛 移动应用与开发中职赛项规程 &#xff08;一&#xff09;学生组竞赛内容:模块A&#xff1a;移动应用界面设计模块B&#xff1a;移动应用前端开发模块C&#xff1a;移动应用测试与交付 &#xff08;二&#xff09;教师组竞赛内容:模块A&#xff1a…...

2024 Google 开发者大会,沉浸式体验AI社会公益

文章目录 一、现场打卡二、AI 社会公益三、Gemma 模型四、Gemini 模型五、Google Cloud六、现场体验七、带着问题逛展八、学习资源和活动九、结束 Happy Hour 一、现场打卡 大家好&#xff0c;我是小雨。 2024 Google 开发者大会&#xff0c;沉浸式体验AI社会公益 今天我们参加…...

OpenCV(开源计算机视觉库)

OpenCV&#xff08;开源计算机视觉库&#xff09;是一个专注于实时计算机视觉的全面库&#xff0c;包含了丰富的工具和功能。以下是 OpenCV 中一些关键知识点的详细列表&#xff1a; 核心功能 基本结构&#xff1a;Mat、Scalar、Point、Size、Rect 等。 图像 I/O&#xff1a;读…...

Java二十三种设计模式-责任链模式(17/23)

责任链模式&#xff1a;实现请求处理的灵活流转 引言 在这篇博客中&#xff0c;我们深入探讨了责任链模式的精髓&#xff0c;从其定义和用途到实现方法&#xff0c;再到使用场景、优缺点、与其他模式的比较&#xff0c;以及最佳实践和替代方案&#xff0c;旨在指导开发者如何…...

Electron31-ViteAdmin桌面端后台|vite5.x+electron31+element-plus管理系统Exe

原创自研Vue3Electron31ElementPlus桌面端轻量级后台管理Exe系统。 基于最新前端技术栈Vite5.x、Vue3、Electron31、ElementPlus、Vue-I18n、Echarts实战开发桌面端高颜值后台管理模板。内置4种布局模板&#xff0c;支持i18n国际化、动态权限路由&#xff0c;实现了表格、表单、…...

鸿蒙HarmonyOS实战:创建NDK工程、毕昇编译器

NDK适用场景 适合使用NDK的场景&#xff1a;应用涉及如下场景时&#xff0c;适合采用NDK开发 性能敏感的场景&#xff0c;如游戏、物理模拟等计算密集型场景。 需要复用已有C或C库的场景。 需要针对CPU特性进行专项定制库的场景&#xff0c;如Neon加速。 不建议使用NDK的场…...

网络安全-防火墙初步认识。

文章目录 1. 防火墙是什么&#xff1f;2. 防火墙的工作原理是什么&#xff1f;3. 防火墙的分类有哪些&#xff1f;4. 实战4.1 防火墙管理和实验介绍4.2 防火墙命令行初体验实验目标&#xff1a;实验步骤&#xff1a; 4.3 防火墙Web初体验实验目标&#xff1a;实验步骤&#xff…...

golang channel什么情况main会deadlock?主协程是什么?

在 Go 语言中&#xff0c;main 函数是程序的入口点&#xff0c;它运行在主协程&#xff08;也称为主 goroutine&#xff09;中。主协程是程序启动后自动创建的第一个 goroutine。当 main 函数执行完毕后&#xff0c;整个 Go 程序就会退出&#xff0c;无论其他 goroutine 是否仍…...

Redis之快速入门

目录 简介 什么是Redis 特点 优势 数据库对比 应用场景 安装与配置 下载 上传解压 安装gcc 编译 查看安装目录 后端启动 测试 系统服务配置 Redis数据类型 通过命令操作Redis String&#xff08;字符串&#xff09; Hash&#xff08;哈希&#xff09; List…...

mac 安装Arthas

mac安装有两种方式 1.第一步安装Arthas 第一种&#xff1a; curl -L https://arthas.aliyun.com/install.sh | sh 第二种jar包形式 curl -O https://arthas.aliyun.com/arthas-boot.jar个人比较推荐第一种因为运行测试成功了 第一种安装后可能会出现一些命令不符合 需…...

创客匠人老蒋:流量是个伪命题,做好这件事是打造IP最好避坑方式

怎么样做好一个创始人的IP&#xff1f;流量低是否可以与创客合作陪跑服务&#xff1f; 在老蒋创客圈第63期对话标杆直播连麦中&#xff0c;老蒋与受邀嘉宾【惢众身心成长家园平台】创办人王辉老师进行了一场深度且具有启发性的交流。 老蒋指出&#xff0c;打造IP不仅要“做自己…...

销售预测数据挖掘实战V2.0

1、概述 沃尔玛全年都会举办几次促销减价活动。这些减价活动都是在重要节假日之前进行的&#xff0c;其中最大的四个节假日是超级碗、劳动节、感恩节和圣诞节。包括这些节假日在内的几周在评估中的权重是非节假日周的五倍。在缺乏完整/理想历史数据的情况下&#xff0c;对这些…...

【K8s】Java项目部署时为什么要用k8s?

目录 重要意义一、高可用性与弹性伸缩二、简化部署与管理三、资源隔离与安全四、容器编排与服务发现 部署步骤准备工作创建 Docker 镜像将镜像推送到镜像仓库创建 Kubernetes 资源对象部署到 Kubernetes 集群 常见问题 在 Java 项目部署中使用 Kubernetes&#xff08;k8s&#…...

【Python】AttributeError: module ‘PIL.Image‘ has no attribute ‘ANTIALIAS‘

【Python】成功解决AttributeError: module ‘PIL.Image‘ has no attribute ‘ANTIALIAS‘ 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博…...

SQL注入(cookie、base64、dnslog外带、搜索型注入)

目录 COOKIE注入 BASE64注入 DNSLOG注入—注入判断 什么是泛解析&#xff1f; UNC路径 网上邻居 LOAD_FILE函数 搜索型注入—注入判断 本文所使用的sql注入靶场为sqli-labs-master&#xff0c;靶场资源文件已上传&#xff0c;如有需要请前往主页或以下链接下载 信安必备…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...