源代码
<template>
<div>
<h2>Row Editing</h2>
<DataGrid :data="data" :clickToEdit="true" editMode="row" style="height:250px">
<GridColumn field="itemid" title="Item ID" :editable="true"></GridColumn>
<GridColumn field="name" title="Name" :editable="true"></GridColumn>
<GridColumn field="listprice" title="List Price" align="right" :editable="true">
<template slot="edit" slot-scope="scope">
<NumberBox v-model="scope.row.listprice" :precision="1"></NumberBox>
</template>
</GridColumn>
<GridColumn field="unitcost" title="Unit Cost" align="right" :editable="true">
<template slot="edit" slot-scope="scope">
<NumberBox v-model="scope.row.unitcost"></NumberBox>
</template>
</GridColumn>
<GridColumn field="attr" title="Attribute" width="30%" :editable="true"></GridColumn>
<GridColumn field="status" title="Status" align="center" :editable="true">
<template slot="body" slot-scope="scope">
{{scope.row.status ? 'T' : 'F'}}
</template>
<template slot="edit" slot-scope="scope">
<CheckBox v-model="scope.row.status" style="width:20px;height:20px"></CheckBox>
</template>
</GridColumn>
</DataGrid>
</div>
</template>
<script>
export default {
data() {
return {
data: []
};
},
created() {
this.data = [
{
code: "FI-SW-01",
name: "Koi",
unitcost: 10.0,
status: true,
listprice: 36.5,
attr: "Large",
itemid: "EST-1"
},
{
code: "K9-DL-01",
name: "Dalmation",
unitcost: 12.0,
status: true,
listprice: 18.5,
attr: "Spotted Adult Female",
itemid: "EST-2"
},
{
code: "RP-SN-01",
name: "Rattlesnake",
unitcost: 12.0,
status: true,
listprice: 38.5,
attr: "Venomless",
itemid: "EST-3"
},
{
code: "RP-SN-01",
name: "Rattlesnake",
unitcost: 12.0,
status: true,
listprice: 26.5,
attr: "Rattleless",
itemid: "EST-4"
},
{
code: "RP-LI-02",
name: "Iguana",
unitcost: 12.0,
status: true,
listprice: 35.5,
attr: "Green Adult",
itemid: "EST-5"
},
{
code: "FL-DSH-01",
name: "Manx",
unitcost: 12.0,
status: true,
listprice: 158.5,
attr: "Tailless",
itemid: "EST-6"
},
{
code: "FL-DSH-01",
name: "Manx",
unitcost: 12.0,
status: true,
listprice: 83.5,
attr: "With tail",
itemid: "EST-7"
},
{
code: "FL-DLH-02",
name: "Persian",
unitcost: 12.0,
status: true,
listprice: 23.5,
attr: "Adult Female",
itemid: "EST-8"
},
{
code: "FL-DLH-02",
name: "Persian",
unitcost: 12.0,
status: true,
listprice: 89.5,
attr: "Adult Male",
itemid: "EST-9"
},
{
code: "AV-CB-01",
name: "Amazon Parrot",
unitcost: 92.0,
status: true,
listprice: 63.5,
attr: "Adult Male",
itemid: "EST-10"
}
];
}
};
</script>