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

相关推荐
慧一居士24 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead26 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app