VTABLE 基本表和透视表的分页功能

已于 2024-06-21 10:57:50 修改
阅读量439 收藏 7
点赞数 10
分类专栏： VTable 文章标签： 前端
于 2024-06-21 10:37:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44231698/article/details/139854093
版权

基本表和VTable数据分析透视表支持分页，但透视组合图不支持分页。
配置项：

  • pagination.totalCount：数据项的总数。数据透视表中的VTable字段将被自动补充，以帮助用户获取数据项的总数。
  • pagination.perPageCount：显示每页的数据项数。注意!数据透视表中的perPageCount将自动更正为指示器数量的整数倍。
  • pagination.currentPage：当前页码。

方法：Methods.updatePagination，更新页码配置信息，调用后会自动重绘。

 /**
   * Update page number
   * @param pagination The information of the page number to be modified
   */
  updatePagination(pagination: IPagination): void;

IPagination type define:

/**
 *Paging configuration
 */
export interface IPagination {
  /** The total number of data, this data in the pivot table will be automatically added without user input */
  totalCount?: number;
  /** Display number of data items per page */
  perPageCount: number;
  /** Display number of items per page */
  currentPage?: number;
}

使用：

const tableInstance = shallowRef();
tableInstance.value = new ListTable(listTableRef.value, option);
tableInstance.value.updatePagination({
perPageCount: number;
    currentPage: pageNumber
  });

基本表（ListTable）的分页
在这里插入图片描述
基于百万级数据的秒级渲染的demo做的分页， https://visactor.io/vtable/demo/performance/100W
分页html相关代码：

<div style="width: 1580px; height: 50px" class="right-align">
            <button id="first-buttom" > 首页</button>
            <button id="prev-buttom" > 上一页</button>
            <span id="page-namber">第1页</span>
            <input id="cpnr" type="hidden">
            <span>/</span>
            <span id="total-page">共 页</span>
            <input id="mpnr" type="hidden">
            <button id="next-buttom">下一页</button>
            <button id="tail-buttom" > 尾页</button>
            <span id="total-num">共 条</span>
            <input  id="spn" type="number" >
            <button id="skip-buttom"> 跳转</button>
        </div>

分页js相关代码：

  const option = {
    records,
    columns,
    widthMode: "standard",
    pagination:{
        perPageCount:15,
        currentPage:0,
    },
  };
  
  onMounted(() => {
    tableInstance.value = new ListTable(listTableRef.value, option);
    //分页相关代码
    let pageNumber = 0;
    const totalNum = option.records.length;
    const pageSize =option.pagination.perPageCount;
    const pageNumberSpan = document.getElementById("page-namber");
    const totalPageSpan = document.getElementById("total-page");
    const totalNumSpan = document.getElementById("total-num");

    const totalPg = Math.ceil(totalNum/pageSize);//总页数
    totalPageSpan.innerHTML='共'+totalPg+'页';
    totalNumSpan.innerHTML='共'+totalNum+'条';


    document.getElementById("prev-buttom").addEventListener("click", () => {
    if (pageNumber === 0) {
        return;
    }
    pageNumber--;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    document.getElementById("first-buttom").addEventListener("click", () => {
    pageNumber=1;
    pageNumber--;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    document.getElementById("spn").value ='';
    });

    document.getElementById("tail-buttom").addEventListener("click", () => {
    pageNumber=totalPg-1;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    document.getElementById("spn").value ='';
    });


    document.getElementById("next-buttom").addEventListener("click", () => {
    if (pageNumber === (totalPg-1)) {
        return;
    }
    pageNumber++;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    document.getElementById("skip-buttom").addEventListener("click", () => {
    debugger
    let specificPageNum = document.getElementById("spn").value;//要跳转的页
    if (specificPageNum > totalPg) {
        pageNumber=totalPg-1;
        document.getElementById("spn").value=totalPg;
    }else{
        pageNumber = specificPageNum-1
    }
    if (specificPageNum <= 0) {
        pageNumber=0;
        document.getElementById("spn").value =1;
    }
    
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    tableInstance.value.on("click_cell", (params) => {
      console.log(params);
    });
  });

整体页面代码：

<template>
    <div>
        <div ref="listTableRef" style="width: 1580px; height: 700px"></div>
        <div style="width: 1580px; height: 50px" class="right-align">
            <button id="first-buttom" > 首页</button>
            <button id="prev-buttom" > 上一页</button>
            <span id="page-namber">第1页</span>
            <input id="cpnr" type="hidden">
            <span>/</span>
            <span id="total-page">共 页</span>
            <input id="mpnr" type="hidden">
            <button id="next-buttom">下一页</button>
            <button id="tail-buttom" > 尾页</button>
            <span id="total-num">共 条</span>
            <input  id="spn" type="number" >
            <button id="skip-buttom"> 跳转</button>
        </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, shallowRef } from "vue";
  import { ListTable } from "@visactor/vtable";
  
  const listTableRef = ref();
  const tableInstance = shallowRef();
  
  function generateRandomString(length) {
  let result = '';
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
}
function generateRandomHobbies() {
  const hobbies = [
    'Reading books',
    'Playing video games',
    'Watching movies',
    'Cooking',
    'Hiking',
    'Traveling',
    'Photography',
    'Playing musical instruments',
    'Gardening',
    'Painting',
    'Writing',
    'Swimming'
  ];

  const numHobbies = Math.floor(Math.random() * 3) + 1; // 生成 1-3 之间的随机整数
  const selectedHobbies = [];

  for (let i = 0; i < numHobbies; i++) {
    const randomIndex = Math.floor(Math.random() * hobbies.length);
    const hobby = hobbies[randomIndex];
    selectedHobbies.push(hobby);
    hobbies.splice(randomIndex, 1); // 确保每个爱好只选一次
  }

  return selectedHobbies.join(', ');
}
function generateRandomBirthday() {
  const start = new Date('1970-01-01');
  const end = new Date('2000-12-31');
  const randomDate = new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
  const year = randomDate.getFullYear();
  const month = randomDate.getMonth() + 1;
  const day = randomDate.getDate();
  return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
}

function generateRandomPhoneNumber() {
  const areaCode = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151', '152', '153', '155', '156', '157', '158', '159', '170', '176', '177', '178', '180', '181', '182', '183', '184', '185', '186', '187', '188', '189'];
  const prefix = areaCode[Math.floor(Math.random() * areaCode.length)];
  const suffix = String(Math.random()).substr(2, 8);
  return prefix + suffix;
}

const generatePersons = (count) => {
  return Array.from(new Array(count)).map((_, i) => {
    const first=generateRandomString(10);
    const last=generateRandomString(4);
    return {
    id: i+1,
    email1: `${first}_${last}@xxx.com`,
    name: first,
    lastName: last,
    hobbies: generateRandomHobbies(),
    birthday: generateRandomBirthday(),
    tel: generateRandomPhoneNumber(),
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
    city: 'beijing',
  }});
};


const records = generatePersons(1000000);
const columns = [
  {
    field: 'id',
    title: 'ID',
    width: 80,
    sort: true,
  },
  {
    field: 'email1',
    title: 'email',
    width: 250,
    sort: true,
  },
  {
    field: 'full name',
    title: 'Full name',
    columns: [
      {
        field: 'name',
        title: 'First Name',
        width: 120,
      },
      {
        field: 'lastName',
        title: 'Last Name',
        width: 100,
      },
    ],
  },
  {
    field: 'hobbies',
    title: 'hobbies',
    width: 200,
  },
  {
    field: 'birthday',
    title: 'birthday',
    width: 120,
  },
  {
    field: 'sex',
    title: 'sex',
    width: 100,
  },
  {
    field: 'tel',
    title: 'telephone',
    width: 150,
  },
  {
    field: 'work',
    title: 'job',
    width: 200,
  },
  {
    field: 'city',
    title: 'city',
    width: 150,
  },
];
  
  const option = {
    records,
    columns,
    widthMode: "standard",
    pagination:{
        perPageCount:15,
        currentPage:0,
    },
  };
  
  onMounted(() => {
    tableInstance.value = new ListTable(listTableRef.value, option);
    //分页相关代码
    let pageNumber = 0;
    const totalNum = option.records.length;
    const pageSize =option.pagination.perPageCount;
    const pageNumberSpan = document.getElementById("page-namber");
    const totalPageSpan = document.getElementById("total-page");
    const totalNumSpan = document.getElementById("total-num");

    const totalPg = Math.ceil(totalNum/pageSize);//总页数
    totalPageSpan.innerHTML='共'+totalPg+'页';
    totalNumSpan.innerHTML='共'+totalNum+'条';


    document.getElementById("prev-buttom").addEventListener("click", () => {
    if (pageNumber === 0) {
        return;
    }
    pageNumber--;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    document.getElementById("first-buttom").addEventListener("click", () => {
    pageNumber=1;
    pageNumber--;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    document.getElementById("spn").value ='';
    });

    document.getElementById("tail-buttom").addEventListener("click", () => {
    pageNumber=totalPg-1;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    document.getElementById("spn").value ='';
    });


    document.getElementById("next-buttom").addEventListener("click", () => {
    if (pageNumber === (totalPg-1)) {
        return;
    }
    pageNumber++;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    document.getElementById("skip-buttom").addEventListener("click", () => {
    debugger
    let specificPageNum = document.getElementById("spn").value;//要跳转的页
    if (specificPageNum > totalPg) {
        pageNumber=totalPg-1;
        document.getElementById("spn").value=totalPg;
    }else{
        pageNumber = specificPageNum-1
    }
    if (specificPageNum <= 0) {
        pageNumber=0;
        document.getElementById("spn").value =1;
    }
    
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    tableInstance.value.on("click_cell", (params) => {
      console.log(params);
    });
  });
  </script>
  
  <style scoped>
    .right-align {
    float: right; /* 让元素浮动到右边 */
    }
</style>

透视表分页：
注：.pagination.totalCount数据总条数：透视表中这个字段 VTable 会自动补充，帮助用户获取到总共数据条数
在这里插入图片描述
整体页面代码：

<template>
    <div>
      <div ref="pivotTableRef" style="width: 1580px; height: 800px"></div>
      <div style="width: 1580px; height: 50px" class="right-align">
        <button id="first-buttom" > 首页</button>
        <button id="prev-buttom" > 上一页</button>
        <span id="page-namber">第1页</span>
        <input id="cpnr" type="hidden">
        <span>/</span>
        <span id="total-page">共 页</span>
        <input id="mpnr" type="hidden">
        <button id="next-buttom">下一页</button>
        <button id="tail-buttom" > 尾页</button>
        <span id="total-num">共 条</span>
        <input  id="spn" type="number" >
        <button id="skip-buttom"> 跳转</button>
    </div>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, shallowRef } from "vue";
  import { PivotTable } from "@visactor/vtable";
  
  const pivotTableRef = ref();
  const tableInstance = shallowRef();
  
  const records = [
    {
      sales: 891,
      number: 7789,
      province: "浙江省",
      city: "杭州市",
      category: "家具",
      sub_category: "桌子",
    },
    {
      sales: 792,
      number: 2367,
      province: "浙江省",
      city: "绍兴市",
      category: "家具",
      sub_category: "桌子",
    },
    {
      sales: 893,
      number: 3877,
      province: "浙江省",
      city: "宁波市",
      category: "家具",
      sub_category: "桌子",
    },
    {
      sales: 1094,
      number: 4342,
      province: "浙江省",
      city: "舟山市",
      category: "家具",
      sub_category: "桌子",
    },
    {
      sales: 1295,
      number: 5343,
      province: "浙江省",
      city: "杭州市",
      category: "家具",
      sub_category: "沙发",
    },
    {
      sales: 496,
      number: 632,
      province: "浙江省",
      city: "绍兴市",
      category: "家具",
      sub_category: "沙发",
    },
    {
      sales: 1097,
      number: 7234,
      province: "浙江省",
      city: "宁波市",
      category: "家具",
      sub_category: "沙发",
    },
    {
      sales: 998,
      number: 834,
      province: "浙江省",
      city: "舟山市",
      category: "家具",
      sub_category: "沙发",
    },
    {
      sales: 766,
      number: 945,
      province: "浙江省",
      city: "杭州市",
      category: "办公用品",
      sub_category: "笔",
    },
    {
      sales: 990,
      number: 1304,
      province: "浙江省",
      city: "绍兴市",
      category: "办公用品",
      sub_category: "笔",
    },
    {
      sales: 891,
      number: 1145,
      province: "浙江省",
      city: "宁波市",
      category: "办公用品",
      sub_category: "笔",
    },
    {
      sales: 792,
      number: 1432,
      province: "浙江省",
      city: "舟山市",
      category: "办公用品",
      sub_category: "笔",
    },
    {
      sales: 745,
      number: 1343,
      province: "浙江省",
      city: "杭州市",
      category: "办公用品",
      sub_category: "纸张",
    },
    {
      sales: 843,
      number: 1354,
      province: "浙江省",
      city: "绍兴市",
      category: "办公用品",
      sub_category: "纸张",
    },
    {
      sales: 895,
      number: 1523,
      province: "浙江省",
      city: "宁波市",
      category: "办公用品",
      sub_category: "纸张",
    },
    {
      sales: 965,
      number: 1634,
      province: "浙江省",
      city: "舟山市",
      category: "办公用品",
      sub_category: "纸张",
    },
    {
      sales: 776,
      number: 1723,
      province: "四川省",
      city: "成都市",
      category: "家具",
      sub_category: "桌子",
    },
    {
      sales: 634,
      number: 1822,
      province: "四川省",
      city: "绵阳市",
      category: "家具",
      sub_category: "桌子",
    },
    {
      sales: 909,
      number: 1943,
      province: "四川省",
      city: "南充市",
      category: "家具",
      sub_category: "桌子",
    },
    {
      sales: 399,
      number: 2330,
      province: "四川省",
      city: "乐山市",
      category: "家具",
      sub_category: "桌子",
    },
    {
      sales: 700,
      number: 2451,
      province: "四川省",
      city: "成都市",
      category: "家具",
      sub_category: "沙发",
    },
    {
      sales: 689,
      number: 2244,
      province: "四川省",
      city: "绵阳市",
      category: "家具",
      sub_category: "沙发",
    },
    {
      sales: 500,
      number: 2333,
      province: "四川省",
      city: "南充市",
      category: "家具",
      sub_category: "沙发",
    },
    {
      sales: 800,
      number: 2445,
      province: "四川省",
      city: "乐山市",
      category: "家具",
      sub_category: "沙发",
    },
    {
      sales: 1044,
      number: 2335,
      province: "四川省",
      city: "成都市",
      category: "办公用品",
      sub_category: "笔",
    },
    {
      sales: 689,
      number: 245,
      province: "四川省",
      city: "绵阳市",
      category: "办公用品",
      sub_category: "笔",
    },
    {
      sales: 794,
      number: 2457,
      province: "四川省",
      city: "南充市",
      category: "办公用品",
      sub_category: "笔",
    },
    {
      sales: 566,
      number: 2458,
      province: "四川省",
      city: "乐山市",
      category: "办公用品",
      sub_category: "笔",
    },
    {
      sales: 865,
      number: 4004,
      province: "四川省",
      city: "成都市",
      category: "办公用品",
      sub_category: "纸张",
    },
    {
      sales: 999,
      number: 3077,
      province: "四川省",
      city: "绵阳市",
      category: "办公用品",
      sub_category: "纸张",
    },
    {
      sales: 999,
      number: 3551,
      province: "四川省",
      city: "南充市",
      category: "办公用品",
      sub_category: "纸张",
    },
    {
      sales: 999,
      number: 352,
      province: "四川省",
      city: "乐山市",
      category: "办公用品",
      sub_category: "纸张",
    },
  ];
  
  const option = {
    rows: ["province", "city"],//行表头对应各级维度的样式及format配置。
    columns: ["category", "sub_category"],//列表头对应各级维度的样式及format配置。
    indicators: ["sales", "number"],//透视表中各个指标的具体配置。
    enableDataAnalysis: true,
    indicatorTitle: "指标名称",//指标标题，显示在角头位置的标题。
    indicatorsAsCol: false,//指标是否作为列表头展示，指标值以列展示，默认为true。
    hideIndicatorName:false,//是否需要将表头上的指标名称隐藏掉。默认为 false。
    showRowHeader:true,//是否显示行表头，默认为 true。
    showColumnHeader:true,//是否显示列表头，默认为 true。
    corner: { //角表头各项配置及样式自定义。
      titleOnDimension: "row" ,//角头标题显示内容依据：'column' 列维度名称作为角头单元格内容,'row' 行维度名称作为角头单元格内容,'none' 角头单元格内容为空
      headerType:"text",//表头类型，可指为'text'|'image'|'link'。
      headerStyle:{//表头单元格样式
        bgColor:'red'
      }
  },
    records: records,
    widthMode:'autoWidth', // 宽度模式：standard 标准模式； adaptive 自动填满容器
    pagination:{
    perPageCount:10,
    currentPage:0,
     },
  };
  
  onMounted(() => {
    tableInstance.value = new PivotTable(pivotTableRef.value, option);
   //分页相关代码
    let pageNumber = 0;
    // const totalNum = option.records.length;
    const totalNum = option.pagination.totalCount;
    const pageSize =option.pagination.perPageCount;
    const pageNumberSpan = document.getElementById("page-namber");
    const totalPageSpan = document.getElementById("total-page");
    const totalNumSpan = document.getElementById("total-num");

    const totalPg = Math.ceil(totalNum/pageSize);//总页数
    totalPageSpan.innerHTML='共'+totalPg+'页';
    totalNumSpan.innerHTML='共'+totalNum+'条';
    document.getElementById("prev-buttom").addEventListener("click", () => {
    if (pageNumber === 0) {
        return;
    }
    pageNumber--;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    document.getElementById("first-buttom").addEventListener("click", () => {
    pageNumber=1;
    pageNumber--;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    document.getElementById("spn").value ='';
    });
    document.getElementById("tail-buttom").addEventListener("click", () => {
    pageNumber=totalPg-1;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    document.getElementById("spn").value ='';
    });
    document.getElementById("next-buttom").addEventListener("click", () => {
    if (pageNumber === (totalPg-1)) {
        return;
    }
    pageNumber++;
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    document.getElementById("skip-buttom").addEventListener("click", () => {
    debugger
    let specificPageNum = document.getElementById("spn").value;//要跳转的页
    if (specificPageNum > totalPg) {
        pageNumber=totalPg-1;
        document.getElementById("spn").value=totalPg;
    }else{
        pageNumber = specificPageNum-1
    }
    if (specificPageNum <= 0) {
        pageNumber=0;
        document.getElementById("spn").value =1;
    }
    
    tableInstance.value.updatePagination({
        currentPage: pageNumber
    });
    pageNumberSpan.innerHTML = '第'+(pageNumber+1)+'页';
    });
    tableInstance.value.on("click_cell", (params) => {
      console.log(params);
    });
  });
  </script>
  
  <style scoped>
    .right-align {
    float: right; /* 让元素浮动到右边 */
    }
</style>
weixin_44231698
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于 VTable 的多维数据展示的原理与实践
玄魂工作室
11-06 845
多维表格又名透视表、交叉表、Pivot Table，多维数据的表格展示一直是数据展示领域的难题，本文从原理到实践为您全面介绍。
vue进阶之vue-easytable实现前端的表格+分页
热门推荐
youyanh的博客
08-08 1万+
表格+分页 对于还在坑中的自己而言，勤奋的笔记不能停。还是在博客上多记录免得文件丢失到时不知哪里找。网上虽然有许多分页内容，但是对初学者而言有许多不必要的东西容易搞混阅读者。所以自己弄了一个简单纯净版的，没有过多的修饰内容。分页部分可以使用elementui中的，也可以直接用vue-easytable中的，两者一样的，没啥区别。 第一步：引入vue-easytable （这个网上有许多的资料...
C++中的虚表（vtable）和虚指针（vptr）示例详解
u010894131的博客
10-11 3156
C++中的虚表（vtable）和虚指针（vptr）示例详解 1、每个有virtual函数的c++类都有一个vtable，每个类对象都有个vtable的vptr； 2、在vc中，类的继承是在基类后面追加数据的形式进行继承的。 测试代码如下（在32位系统下的vs2008环境中测试的）： class Test { public:Test(int a) {data = a;}virtual ~Test()...
C++ 虚函数表 vtable
qq_62381297的博客
06-11 815
本篇文章通过小实验来了解了解虚函数表，测试环境 ubuntu16 gcc 5.4.0。
C++虚函数表(vtable)和虚函数指针(vfptr)
一首小夜曲
01-23 7048
编译器会构建一张虚表（ vtable )，每一个类都有自己独特的虚表。同时，在这个继承链上，编译器会为基类插入一个隐式的指针（一般是对象的首地址），指向虚表，称为__vptr。然后，子类继承父类时，会获得继承下来的__vptr，再根据自己的类的情况兼容（修改虚函数表里的值、发生偏移等。于是，当我们构建具体的类时，若是基类类型，__vptr就会指向父类的vtable，若是子类类型，__vptr就会指
C++虚函数表实例分析
09-04
当我们声明一个函数为虚函数时，编译器会为该类创建一个虚函数表（Virtual Table，简称vtable），其中包含了该类所有虚函数的指针。 在类的实例化过程中，每个对象都会包含一个指向虚函数表的指针。当通过基类指针...
博客虚函数表的作用.rar
11-05
虚函数表（Virtual Function Table，简称vtable）是C++多态性实现的关键机制，它在面向对象编程中扮演着重要角色。这篇博客探讨了虚函数表如何在C++对象模型中工作，以及它对程序行为的影响。我们将深入讨论虚函数、...
C++虚函数及虚函数表解析
07-24
在上面的代码中，虽然没有直接展示虚函数表，但其工作原理如下：`base_class`、`drived_class1`和`drived_class2`每个类都有自己的vtable，`pbc`指向不同对象时，调用虚函数实际上是在访问相应的vtable并执行相应的...
c++多态技术和虚函数表
03-03
虚函数的实现依赖于虚函数表（Virtual Table，简称vtable）。每个含有虚函数的类都会有一个虚函数表，其中存储了各个虚函数的地址。当通过基类指针调用虚函数时，实际上是查找对应的vtable并调用相应地址的函数。 ...
vtable 虚函数表
09-17
vtable 虚函数表 更加有效的理解虚函数
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 155
css浮动——float特点
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 69
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 916
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 59
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 556
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1855
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 724
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 556
CTFWP，ctfshow-web42
虚函数表和多态有什么关系
05-22
虚函数表和多态是面向对象编程中的重要概念，它们之间有密切的关系。 虚函数表（Virtual Function Table，简称 vtable）是一种数据结构，用于存储类的虚函数的地址。每个使用了虚函数的类都有一个 vtable，它包含了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值