vxe-table 如何使用日期范围选择，同时绑定对应行的2个字段、开始日期和结束日期

原创于 2025-06-19 09:20:12 发布 · 487 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vxe-table

vxe-ui 专栏收录该内容

88 篇文章

订阅专栏

vxe-table 如何使用日期范围选择，同时绑定对应行的2个字段、开始日期和结束日期
当表格中需要给每一行的开始日期和结束日期可编辑时，这是会可以使用2个日期组件，也可以使用一个日期范围选择器。

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

代码

在这里插入图片描述

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

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  showOverflow: true,
  editConfig: {
    trigger: 'click',
    mode: 'row'
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name', minWidth: 180, editRender: { name: 'VxeInput' } },
    { field: 'startAndEnd', title: '日期范围', width: 320, editRender: { name: 'VxeDateRangePicker', startField: 'startDate', endField: 'endDate', props: { type: 'date', clearable: true } } }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', startDate: '', endDate: '', address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', startDate: '2025-09-01', endDate: '2025-10-10', address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', startDate: '2024-06-06', endDate: '2024-08-06', address: 'Shanghai' }
  ]
})
</script>