easyui +vue v-slot 注意事项

https://www.jeasyui.com/demo-vue/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=CheckBox%20Selection&sort=asc

接口说明

javascript 复制代码

<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 的语法最终生效没有报错,查了一遍书 ... ...

javascript 复制代码

<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 动态更新分类数据