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

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

数据格式，使用字符串日期格式

1. <template>
2.   
3.     <vxe-table
4.       border
5.       show-overflow
6.       :edit-config="{mode: 'row', trigger: 'click'}"
7.       :data="tableData">
8.       <vxe-column type="seq" width="60"></vxe-column>
9.       <vxe-column field="name" title="Name" min-width="180" :edit-render="nameEditRender"></vxe-column>
10.       <vxe-column field="date" title="日期" width="180" :edit-render="dateEditRender"></vxe-column>
11.       <vxe-column field="year" title="年份" width="180" :edit-render="yearEditRender"></vxe-column>
12.       <vxe-column field="quarter" title="季度" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'quarter' } }"></vxe-column>
13.       <vxe-column field="month" title="月份" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'month' } }"></vxe-column>
14.       <vxe-column field="week" title="周" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'week' } }"></vxe-column>
15.       <vxe-column field="time" title="时间" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'time' } }"></vxe-column>
16.       <vxe-column field="datetime" title="日期带时间" width="180" :edit-render="{ name: 'VxeDatePicker', props: { type: 'datetime' } }"></vxe-column>
17.     </vxe-table>
18.   
19. </template>

复制代码

日期范围

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

1. <template>
2.   
3.     <vxe-table
4.       border
5.       show-overflow
6.       :edit-config="{mode: 'row', trigger: 'click'}"
7.       :data="tableData">
8.       <vxe-column type="seq" width="60"></vxe-column>
9.       <vxe-column field="name" title="Name" min-width="180" :edit-render="nameEditRender"></vxe-column>
10.       <vxe-column field="startAndEnd" title="日期范围" width="320" :edit-render="startAndEndEditRender"></vxe-column>
11.     </vxe-table>
12.   
13. </template>

复制代码

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