唐嘉懿 发表于 2025-6-10 13:06:10

vxe-table vue 表格中如何渲染单元格日期控件，单元格可编辑

vxe-table vue 表格中如何渲染单元格日期控件，单元格可编辑
查看官网：https://vxetable.cn
日期选择

数据格式，使用字符串日期格式
https://img2024.cnblogs.com/blog/3563285/202506/3563285-20250610092728081-238127672.png

<template>

    <vxe-table
      border
      show-overflow
      :edit-config="{mode: 'row', trigger: 'click'}"
      :data="tableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name" min-width="180" :edit-render="nameEditRender"></vxe-column>
      <vxe-column field="date" title="日期" width="180" :edit-render="dateEditRender"></vxe-column>
      <vxe-column field="year" title="年份" width="180" :edit-render="yearEditRender"></vxe-column>
      <vxe-column field="quarter" title="季度" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'quarter' } }"></vxe-column>
      <vxe-column field="month" title="月份" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'month' } }"></vxe-column>
      <vxe-column field="week" title="周" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'week' } }"></vxe-column>
      <vxe-column field="time" title="时间" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'time' } }"></vxe-column>
      <vxe-column field="datetime" title="日期带时间" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'datetime' } }"></vxe-column>
    </vxe-table>

</template>日期范围

数据格式，支持同时绑定2个字段

<template>

    <vxe-table
      border
      show-overflow
      :edit-config="{mode: 'row', trigger: 'click'}"
      :data="tableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name" min-width="180" :edit-render="nameEditRender"></vxe-column>
      <vxe-column field="startAndEnd" title="日期范围" width="320" :edit-render="startAndEndEditRender"></vxe-column>
    </vxe-table>

</template>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

玻倌瞽 发表于 2025-11-25 15:16:19

感谢分享

怀陶宁 发表于 2025-12-3 19:04:31

感谢分享

骆熙华 发表于 2025-12-23 01:56:09

很好很强大我过来先占个楼 待编辑

事确 发表于 2026-1-1 03:58:35

懂技术并乐意极积无私分享的人越来越少。珍惜

吉芷雁 发表于 2026-1-14 06:31:03

收藏一下   不知道什么时候能用到

固拆棚 发表于 2026-1-14 19:58:13

这个好，看起来很实用

昆拗干 发表于 2026-1-19 05:56:06

很好很强大我过来先占个楼 待编辑

归悦可 发表于 2026-1-23 06:07:04

用心讨论，共获提升！

米榜饴 发表于 2026-1-23 06:23:29

这个有用。

撙仿 发表于 2026-1-25 11:37:12

不错，里面软件多更新就更好了

瞧厨 发表于 2026-1-25 11:41:47

鼓励转贴优秀软件安全工具和文档！

段干叶农 发表于 2026-1-28 09:19:07

yyds。多谢分享

背竽 发表于 2026-1-28 09:42:36

不错，里面软件多更新就更好了

裸历 发表于 2026-1-29 08:42:04

收藏一下   不知道什么时候能用到

柏雅云 发表于 2026-1-30 10:05:22

感谢分享，下载保存了，貌似很强大

庞环 发表于 2026-1-31 16:27:36

谢谢分享，试用一下

铝缉惹 发表于 2026-2-5 07:45:11

谢谢楼主提供！

卓卞恻 发表于 2026-2-9 20:39:57

前排留名，哈哈哈

铵滔 发表于 2026-2-9 22:21:29

新版吗？好像是停更了吧。
页: [1] 2
查看完整版本: vxe-table vue 表格中如何渲染单元格日期控件，单元格可编辑