Please refer to this example.
<template>
<div>
<DataGrid
style="width:300px;height:250px"
:data="data"
:clickToEdit="true"
groupField="group"
selectionMode="cell"
editMode="cell"
@editBegin="onEditBegin($event)"
>
<GridColumn :cellCss="headerStyle" width="30"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="value" title="Value" :editable="true" :editRules="rules">
<template slot="edit" slot-scope="scope">
<TextBox v-if="scope.row.editor=='TextBox'" v-model="scope.row.value"></TextBox>
<NumberBox v-if="scope.row.editor=='NumberBox'" v-model="scope.row.value"></NumberBox>
<CheckBox
v-if="scope.row.editor=='CheckBox'"
v-model="scope.row.value"
style="margin:5px 0 0 5px"
></CheckBox>
<DateBox
v-if="scope.row.editor=='DateBox'"
v-model="scope.row.value"
:panelStyle="{width:'250px',height:'250px'}"
></DateBox>
</template>
<template slot="body" slot-scope="scope">
<div v-if="scope.row.editor=='DateBox'">{{formatDate(scope.row.value)}}</div>
<div v-if="scope.row.editor!='DateBox'">{{scope.row.value}}</div>
</template>
</GridColumn>
<template slot="group" slot-scope="scope">
<span style="font-weight:bold">
{{scope.value}} -
<span style="color:red">{{scope.rows.length}}</span> Item(s)
</span>
</template>
</DataGrid>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
rules: [],
headerStyle: {
background: "#fafafa"
}
};
},
methods: {
onEditBegin({ row, column }) {
this.rules = row.rules;
},
formatDate(date) {
return (
date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
);
}
},
created() {
this.data = [
{
name: "Name",
value: "Bill Smith",
group: "ID Settings",
editor: "TextBox",
rules: ["required"]
},
{ name: "Address", value: "", group: "ID Settings", editor: "TextBox" },
{ name: "Age", value: 40, group: "ID Settings", editor: "NumberBox" },
{
name: "Birthday",
value: new Date(2012, 1, 2),
group: "ID Settings",
editor: "DateBox"
},
{
name: "SSN",
value: "123-456-7890",
group: "ID Settings",
editor: "TextBox"
},
{
name: "Email",
value: "bill@gmail.com",
group: "Marketing Settings",
editor: "TextBox",
rules: ["email"]
},
{
name: "FrequentBuyer",
value: true,
group: "Marketing Settings",
editor: "CheckBox"
}
];
}
};
</script>