首页 > 其他分享 >vxe-table 实现双击自适应行高,行高拖拽调整高度

vxe-table 实现双击自适应行高,行高拖拽调整高度

时间:2025-01-22 11:55:08浏览次数:1  
标签:name title vxe age sex field 双击 行高

vxe-table 实现双击自适应行高,行高拖拽调整高度

官网:https://vxetable.cn

通过 row-config.resizable 和 row-resize 启用行高拖拽功能以及 resizable-config.isDblclickAutoHeight 启用双击自适应行高

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    const gridOptions = {
      border: true,
      rowConfig: {
        resizable: true
      },
      columns: [
        { type: 'seq', width: 70, rowResize: true },
        { field: 'name', title: 'Name' },
        { field: 'sex', title: 'Sex' },
        { field: 'age', title: 'Age' },
        { field: 'time', title: 'Time' },
        { field: 'address', title: 'Address' }
      ],
      data: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ]
    }
    return {
      gridOptions
    }
  }
}
</script>

https://gitee.com/x-extends/vxe-table

标签:name,title,vxe,age,sex,field,双击,行高
From: https://www.cnblogs.com/qaz666/p/18685467

相关文章

  • 如何利用甘特图进行高效管理?——附应用工具
    甘特图通过横轴表示时间,纵轴表示任务,每个任务的开始和结束时间通过横向条形表示。甘特图可以帮助管理者对项目中的各个任务进行规划和排序,明确任务的开始和结束时间,以及任务之间的依赖关系。通过甘特图,管理者可以实时监控项目的进度情况,了解哪些任务已经完成、哪些任务正在进行以......
  • 如果通过 vxe-table 实现 Excel,可以和 Excel、WPS 复制粘贴
    如果通过vxe-table实现Excel,可以和Excel、WPS复制粘贴官网:https://vxetable.cn<template><div><vxe-gridref="gridRef"v-bind="gridOptions"@cell-area-selection-end="cellAreaSelectionEndEvent"......
  • windows双击查看ip
    如何方便查看本地电脑的ip?直接上干货:1、在桌面右击,新建=>文本文档;  2、重命令为ip.txt  3、双击打开,输入 ipconfigpause,然后保存;  4、右击文档,重命令为“ip.bat”;  5、再次双击此文档,ip地址就出来了;  ps:ipconfig:是系统命令,用于查看ip的地......
  • DevExpress WinForms 中文教程:Grid View - 如何实现自动行高?
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!在本教程中,我们将带您了解如何使用DevExpressWinF......
  • vxe-table 实现行高拖拽功能
    vxe-table实现行高拖拽功能,需要注意更新到最新版本才支持该功能官网:https://vxetable.cn通过row-config.resizable和row-resize启用行高拖拽功能;当需要多列允许触发行高拖拽时,通过row-resize指定任意列<template><div><vxe-gridv-bind="gridOptions"></vxe-......
  • 鼠标双击连击解决方案
    前言手里的这是第二个才用1年多就出现双击现象的G102了,太不耐操。我算是信了那群广告狗的邪,才又选了这个鼠标。鼠标双击解决方法主要有以下几种:玄学方法:朝鼠标里哈一口气多吹几口气;使用软件忽视短暂间隔内的点击行为;拆鼠标,调整微动;重买,选光微动+光手轮USB有线鼠标;软件Do......
  • Revit提效本地族库功能,双击直接载入项目创建
    #创作灵感#关于族功能目前有仨导出项目族:这个功能会导出当前项目所有的族,并按族类别分类文件夹项目族搜索:低版本的Revit对通过名称查找相应的族不支持,咱们这个可本地族库:新增本地族库功能,按文件夹层级快速支持双击快速布置基于这个功能的总结,以下是本地族库实现的......
  • 使用VoyageAI进行高效文本嵌入与重新排序
    在自然语言处理(NLP)任务中,文本嵌入和重新排序是两项关键技术。VoyageAI提供了针对特定领域和公司的定制化嵌入模型,以提高检索质量。本文将详细讲解如何使用VoyageAI进行文本嵌入和重新排序。技术背景介绍文本嵌入是一种将文本转换为数值向量的方法,使其能够在机器学习模型......
  • Python 进行高效数据抓取
    第一招:使用requests库进行HTTP请求requests库是Python中处理HTTP请求的神器,它让发送请求变得异常简单。importrequests#发送GET请求response=requests.get('https://api.example.com/data')#检查请求是否成功ifresponse.status_code==200:print......
  • C#实战|人员管理系统[27]:双击列表显示详细人员信息
    哈喽,你好啊,我是雷工!前面实现了通过编号查询详细的人员信息,但使用中可能不知道人员编号,需要先通过所属组织查询人员列表,根据列表中的编号查询详细的人员信息;这时使用起来不太友好,输入编号比较麻烦,是否可以优化一下,在查询列表中双击某行,直接弹出显示该行对应人员的详细信息界面......