https://www.jeasyui.com/demo-vue/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=CheckBox%20Selection&sort=asc
接口说明
<template><div><h2>Checkbox Selection</h2><DataGrid :data="data" style="height:250px"><GridColumn field="ck" :width="50" align="center"><template #header slot-scope="scope"><CheckBox v-model="allChecked" @checkedChange="onAllCheckedChange($event)"></CheckBox></template><template #body slot-scope="scope"><CheckBox v-model="scope" @checkedChange="onCheckedChange($event)"></CheckBox></template></GridColumn><GridColumn field="itemid" title="Item ID"></GridColumn><GridColumn field="name" title="Name" width="30%"></GridColumn><GridColumn field="listprice" title="List Price" align="right"></GridColumn><GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn><GridColumn field="status" title="Status" align="center"></GridColumn></DataGrid><p>Checked Items: {{checkedRows.map(row=>row.code).join(',')}}</p></div>
</template><script setup lang="js">
import {DataGrid,GridColumn,CheckBox} from "v3-easyui";
</script><script lang="js">
export default {data() {return {data: [{code: "FI-SW-01",name: "Koi",unitcost: 10.0,status: "P",listprice: 36.5,attr: "Large",itemid: "EST-1",selected: true},{code: "K9-DL-01",name: "Dalmation",unitcost: 12.0,status: "P",listprice: 18.5,attr: "Spotted Adult Female",itemid: "EST-10"},{code: "RP-SN-01",name: "Rattlesnake",unitcost: 12.0,status: "P",listprice: 38.5,attr: "Venomless",itemid: "EST-11"},{code: "RP-SN-01",name: "Rattlesnake",unitcost: 12.0,status: "P",listprice: 26.5,attr: "Rattleless",itemid: "EST-12"},{code: "RP-LI-02",name: "Iguana",unitcost: 12.0,status: "P",listprice: 35.5,attr: "Green Adult",itemid: "EST-13"},{code: "FL-DSH-01",name: "Manx",unitcost: 12.0,status: "P",listprice: 158.5,attr: "Tailless",itemid: "EST-14"},{code: "FL-DSH-01",name: "Manx",unitcost: 12.0,status: "P",listprice: 83.5,attr: "With tail",itemid: "EST-15"},{code: "FL-DLH-02",name: "Persian",unitcost: 12.0,status: "P",listprice: 23.5,attr: "Adult Female",itemid: "EST-16"},{code: "FL-DLH-02",name: "Persian",unitcost: 12.0,status: "P",listprice: 89.5,attr: "Adult Male",itemid: "EST-17"},{code: "AV-CB-01",name: "Amazon Parrot",unitcost: 92.0,status: "P",listprice: 63.5,attr: "Adult Male",itemid: "EST-18"}],allChecked: false,rowClicked: false};},computed: {checkedRows() {return this.data.filter(row => row.selected);}},methods: {onAllCheckedChange(checked) {if (this.rowClicked) {return;}this.data = this.data.map(row => {return Object.assign({}, row, {selected: checked});});},onCheckedChange(checked) {this.allChecked = this.checkedRows.length === this.data.length;this.rowClicked = true;this.$nextTick(() => (this.rowClicked = false));}}
};
</script>
兼容型修改 v3-easyui，修改的示例代码，兼容 vue 最新版本
更准确的修改 , 引用网图
vue3 的语法 最终生效没有报错,查了一遍书 … …
<template><div><h2>Checkbox Selection</h2><DataGrid :data="data"style="width: 100%;height: 100%;":dblclickToEdit="true"selectionMode="row":pagination="true":total="data.length":pageSize="10"editMode="row"@editEnd="onEditEnd($event)"@cellClick="onCellClick($event)":clickToEdit="false"><GridColumn field="ck" :width="50" align="center"><template v-slot:header><CheckBox v-model="allChecked" @checkedChange="onAllCheckedChange($event)"></CheckBox></template><template v-slot:body="scope"><CheckBox v-model="scope.row.selected" @checkedChange="onCheckedChange($event)"></CheckBox></template></GridColumn><GridColumn field="itemid" title="Item ID"></GridColumn><GridColumn field="name" title="Name" width="30%"></GridColumn><GridColumn field="listprice" title="List Price" align="right" :editable="true"></GridColumn><GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn><GridColumn field="status" title="Status" align="center"></GridColumn></DataGrid></div>
</template><script setup lang="js">
import {DataGrid,GridColumn,CheckBox,Panel,Pagination} from "v3-easyui";
</script><script lang="js">
export default {data() {return {data: [{code: "FI-SW-01",name: "Koi",unitcost: 10.0,status: "P",listprice: 36.5,attr: "Large",itemid: "EST-1",selected: false},{code: "K9-DL-01",name: "Dalmation",unitcost: 12.0,status: "P",listprice: 18.5,attr: "Spotted Adult Female",itemid: "EST-10",selected: false},{code: "RP-SN-01",name: "Rattlesnake",unitcost: 12.0,status: "P",listprice: 38.5,attr: "Venomless",itemid: "EST-11",selected: false},{code: "RP-SN-01",name: "Rattlesnake",unitcost: 12.0,status: "P",listprice: 26.5,attr: "Rattleless",itemid: "EST-12",selected: false},{code: "RP-LI-02",name: "Iguana",unitcost: 12.0,status: "P",listprice: 35.5,attr: "Green Adult",itemid: "EST-13",selected: false},{code: "FL-DSH-01",name: "Manx",unitcost: 12.0,status: "P",listprice: 158.5,attr: "Tailless",itemid: "EST-14",selected: false},{code: "FL-DSH-01",name: "Manx",unitcost: 12.0,status: "P",listprice: 83.5,attr: "With tail",itemid: "EST-15",selected: false},{code: "FL-DLH-02",name: "Persian",unitcost: 12.0,status: "P",listprice: 23.5,attr: "Adult Female",itemid: "EST-16",selected: false},{code: "FL-DLH-02",name: "Persian",unitcost: 12.0,status: "P",listprice: 89.5,attr: "Adult Male",itemid: "EST-17",selected: false},{code: "AV-CB-01",name: "Amazon Parrot",unitcost: 92.0,status: "P",listprice: 63.5,attr: "Adult Male",itemid: "EST-18",selected: false}],allChecked: false,rowClicked: false};},computed: {checkedRows() {return this.data.filter(row => row.selected);}},methods: {onPageChange(event){console.log(event);},onAllCheckedChange(checked) {if (this.rowClicked) {return;}this.data = this.data.map(row => {return Object.assign({}, row, {selected: checked});});},onEditEnd(event){console.log(event);},onCellClick(event){console.log(event);},onCheckedChange(checked) {this.allChecked = this.checkedRows.length === this.data.length;this.rowClicked = true;this.$nextTick(() => (this.rowClicked = false));}}
};
</script>
最终可用的组件
绑定数据以后可以根据menu 动态更新分类数据