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

vxe-table 复制单元格时如何自定义内容,自定义复制的文本内容

vxe-table 复制单元格时如何自定义内容,自定义复制的文本内容
默认情况下是复制对应 field 字段值,当需要对特定字段进行格式化或自定义时,就可以通过 copyMethod、pasteMethod 配置可以精确控制复制粘贴的所有行为以及自定义复制粘贴的逻辑控制。比如需要控制某个单元格复制后的值,本来是下拉框的键值,要转成实际值复制到 excel,这时候就可以使用该转换函数了

查看官网:https://vxetable.cn

image

<template><div><vxe-grid v-bind="gridOptions"></vxe-grid></div>
</template><script setup>
import { reactive } from 'vue'const sexEditRender = reactive({name: 'VxeSelect',options: [{ label: '女', value: '0' },{ label: '男', value: '1' }]
})const gridOptions = reactive({border: true,height: 500,showOverflow: true,columnConfig: {resizable: true},mouseConfig: {area: true // 是否开启区域选取},areaConfig: {multiple: true // 是否启用多区域选取功能},editConfig: {mode: 'cell', // 单元格编辑模式trigger: 'dblclick' // 双击单元格激活编辑状态},keyboardConfig: {isAll: true, // 是否启用快捷键全选isClip: true, // 是否开启复制粘贴isEdit: true, // 是否开启任意键进入编辑(功能键除外)isDel: true, // 是否开启删除键功能isEsc: true // 是否开启Esc键关闭编辑功能},columns: [{ type: 'seq', fixed: 'left', width: 60 },{ field: 'name', fixed: 'left', title: '名字', editRender: { name: 'input' } },{field: 'role',title: '角色',editRender: { name: 'input' },copyMethod ({ cellValue }) {return `角色:${cellValue}`}},{field: 'sex',title: '性别',editRender: sexEditRender,copyMethod ({ column, cellValue }) {// 对于下拉框的类型,自定义指定列的复制内容if (column.field === 'sex') {return cellValue ? (cellValue === '1' ? '男' : '女') : ''}return cellValue},pasteMethod ({ row, column, cellValue }) {// 对于下拉框的类型,自定义指定列粘贴逻辑if (column.field === 'sex') {row[column.field] = cellValue ? (cellValue === '男' ? '1' : '0') : ''} else {row[column.field] = cellValue}}},{ field: 'num', title: '分数', editRender: { name: 'VxeNumberInput' } },{ field: 'age', title: '年龄', editRender: { name: 'VxeNumberInput' } },{ field: 'address', title: '地址', width: 200, editRender: { name: 'input' } }],data: [{ id: 10001, name: '张三', role: '前端开发', sex: '0', num: 23, age: 28, address: '北京市17号' },{ id: 10002, name: '李四', role: '测试人员', sex: '1', num: 23, age: 22, address: '江苏省27号' },{ id: 10003, name: '老六', role: '项目经理', sex: '0', num: 23, age: 32, address: '深圳市19号' },{ id: 10004, name: '小李', role: '后端开发', sex: '1', num: 456, age: 24, address: '江苏省47号' },{ id: 10005, name: '老万', role: '设计师', sex: '1', num: 23, age: 42, address: '北京市18号' },{ id: 10006, name: '小刘', role: '前端开发', sex: '0', num: 23, age: 38, address: '上海市17号' },{ id: 10007, name: '老徐', role: '测试人员', sex: '1', num: 100, age: 24, address: '北京市19号' },{ id: 10008, name: '老二', role: '设计师', sex: '0', num: 345, age: 34, address: '上海市11号' },{ id: 10009, name: '小牛', role: '前端开发', sex: '1', num: 67, age: 52, address: '深圳市29号' },{ id: 10010, name: '小帅', role: '测试人员', sex: '1', num: 23, age: 44, address: '北京市37号' },{ id: 10011, name: '老魏', role: '后端开发', sex: '0', num: 56, age: 52, address: '深圳市12号' },{ id: 10012, name: '小徐', role: '测试人员', sex: '1', num: 23, age: 16, address: '广州市16号' },{ id: 10013, name: '小张', role: '设计师', sex: '1', num: 69, age: 16, address: '广州市46号' },{ id: 10014, name: '老冯', role: '前端开发', sex: '0', num: 36, age: 36, address: '广州市66号' },{ id: 10015, name: '小哥', role: '后端开发', sex: '0', num: 33, age: 47, address: '广州市56号' },{ id: 10016, name: '李哥', role: '测试人员', sex: '1', num: 2, age: 42, address: '深圳市16号' }]
})
</script>
http://www.jsqmd.com/news/33070/

相关文章:

  • 我发现很多程序员都不会打日志。。。
  • ThreadLocal与ScopedValue对比讲解
  • openEuler系统安装DDE桌面与openGauss数据库完整指南
  • 2025年抖音关键词排名优化公司推荐:口碑榜单与可验证数据全解析
  • 2025年无纸化会议系统批发厂家权威推荐榜单:无纸化智能会议系统/无纸化会议升降屏/无纸化会议设备源头厂家精选
  • Gitee:中国DevSecOps实践的标杆与未来
  • 2025年抖音排名优化公司推荐:市场报告与主流排行榜单
  • 2025年抖音搜索优化公司推荐:高性价比选择全攻略
  • MyEMS:智能化能源管理的创新实践者
  • 小红书收藏夹里的精美图片/视频,这样保存更清爽
  • 2025年抖音SEO排名推荐:市场报告揭示的头部解决方案
  • 2025年精密精轧管生产厂家权威推荐榜单:不锈钢管精轧管/冷拔管精轧管/精轧焊管源头厂家精选
  • 完整教程:2024年提示工程架构师必看:用户参与研究的最新趋势,提升提示设计效果
  • 2025年11月智能AI客服服务商榜单:Voicefox与四家竞品深度评测
  • 还在担心文件泄露?这个浏览器里的格式转换工具,给了另一种答案
  • 2025年抖音搜索排名优化公司推荐:高性价比选择指南与避坑方案
  • 2025年中国AI生态服务行业TOP5企业推荐:南方网通深度解析
  • 2025年11月智能AI客服服务商评价榜:Voicefox等五强实测数据解析
  • 2025年创致联创迅灵GEO技术支持怎么样?
  • 2025年11月呼叫中心系统品牌评测榜:Voicefox等五强深度对比
  • Qt/C++编写GB28181服务/前后端分离/定义一套交互协议/视频点播/录像回放和控制/警情通知
  • 2025年11月效果图公司推荐榜:权威评测五强排名与横向对比
  • 开源 C++ QT QML 开发(八)自定义控件--圆环 - 实践
  • psql -U PostgreSQL端命令
  • Linux V4L2框架详解:Camera软件架构与驱动达成
  • 2025年铝门窗招商加盟机构权威推荐榜单:门窗加盟店/铝合金门窗品牌加盟/断桥门窗加盟源头机构精选
  • 2025年11月学无人机学校评价榜:正规资质与课程深度盘点
  • 2025年11月产品设计公司推荐榜:从资质到案例全维度评测
  • 线程组 HTTP请求 结果树 聚合报告
  • 2025年11月产品设计公司推荐榜:权威评测五强排名与对比