亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vxe-table中vxe-grid中的合并單元格方式(合并行、列)

 更新時間:2025年04月24日 16:29:52   作者:大個個個個個兒  
這篇文章主要介紹了vxe-table中vxe-grid中的合并單元格方式(合并行、列),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vxe-table中vxe-grid的合并單元格(合并行、列)

效果圖(我所用到的是合并行)

根據(jù)personName人員名稱相同合并行

實例代碼

<vxe-grid v-bind="gridOptions" ref="tableRefs"></vxe-grid>


// 列表表格數(shù)據(jù)
const gridOptions = ref({
  data: [],
  align: 'center',
  loading: false,
  border: true,
  height: '300px',
  columns: [
    { type: 'seq', width: 50 },
    {
      title: '人員名稱',
      field: 'personName'
    },
    {
      title: '人員類型',
      field: 'typeName'
    },
    {
      title: '代墊公司',
      field: 'proxyOrgName'
    },
    {
      title: '開始時間',
      field: 'startTime'
    },
    {
      title: '結(jié)束時間',
      field: 'endTime'
    }
  ]
});
const getPage = async () => {
  gridOptions.value.loading = true;
  const res = await PersonnelTypeManagementApi.personHistory({
    pageNo: customMade.value.pageNo,
    pageSize: customMade.value.pageSize,
    orgId: rightOrgId.value,
    personId: props.rowData.personId
  });
  gridOptions.value.loading = false;
  gridOptions.value.data = res.data.rows;
  nextTick(() => { //必須在nextTick中請求,否則表格不會重新渲染
    updateMergeCells(res.data.rows);
  });
  customMade.value.total = res.data.totalRows;
};
// 合并規(guī)則
const updateMergeCells = tableData => {
  const merges = [];
  let prevPersonName = null;
  let count = 0;

  for (let rowIndex = 0; rowIndex < tableData.length; rowIndex++) {
    const currentRow = tableData[rowIndex];
    if (prevPersonName === currentRow.personName) {
      count++;
    } else {
      if (count > 0) {
        // 注意這里 row 是從 rowIndex - count 開始的
        merges.push({ row: rowIndex - count - 1, col: 1, rowspan: count + 1, colspan: 1 });
      }
      prevPersonName = currentRow.personName;
      count = 0;
    }
  }

  // 處理最后一組相同的 personName
  if (count > 0) {
    merges.push({ row: tableData.length - count - 1, col: 1, rowspan: count + 1, colspan: 1 });
  }

  if (tableRefs.value) {
    tableRefs.value.setMergeCells(merges);//設(shè)置合并
  }
};

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 解決vue中el-date-picker?type=daterange日期不回顯的問題

    解決vue中el-date-picker?type=daterange日期不回顯的問題

    這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue實現(xiàn)圖片平鋪方式

    vue實現(xiàn)圖片平鋪方式

    在Vue中,實現(xiàn)圖片或組件的平鋪布局并允許用戶進行修改,可以通過數(shù)據(jù)綁定、模板編寫與交互設(shè)計來實現(xiàn)圖片平鋪,使用v-for指令和動態(tài)組件,可以創(chuàng)建可編輯的組件平鋪布局,允許用戶通過點擊觸發(fā)編輯操作,通過外部編輯面板修改屬性后保存更改
    2024-10-10
  • Vue.js中的組件系統(tǒng)

    Vue.js中的組件系統(tǒng)

    這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-05-05
  • Element Steps步驟條的使用方法

    Element Steps步驟條的使用方法

    這篇文章主要介紹了Element Steps步驟條的使用方法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
    2020-07-07
  • Vue3.0之引入Element-plus ui樣式的兩種方法

    Vue3.0之引入Element-plus ui樣式的兩種方法

    本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • vue的簡介及@vue/cli?腳手架的使用示例

    vue的簡介及@vue/cli?腳手架的使用示例

    vue 是一個 漸進式的javascript框架,腳手架是一個通用概念,幫助搭建項目的工具,本文以vue2為例結(jié)合實例代碼給大家詳細講解,感興趣的朋友跟隨小編一起看看吧
    2022-12-12
  • uniapp微信小程序axios庫的封裝及使用詳細教程

    uniapp微信小程序axios庫的封裝及使用詳細教程

    這篇文章主要給大家介紹了關(guān)于uniapp微信小程序axios庫的封裝及使用的相關(guān)資料,Axios是一個基于promise網(wǎng)絡(luò)請求庫,作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下
    2023-08-08
  • Vue中使用iframe踩坑問題記錄 iframe+postMessage

    Vue中使用iframe踩坑問題記錄 iframe+postMessage

    這篇文章主要介紹了Vue中使用iframe踩坑問題記錄 iframe+postMessage,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue2.0 解決抽取公用js的問題

    vue2.0 解決抽取公用js的問題

    這篇文章主要介紹了vue2.0 解決抽取公用js的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • vue通過笛卡兒積實現(xiàn)sku庫存配置方式

    vue通過笛卡兒積實現(xiàn)sku庫存配置方式

    這篇文章主要介紹了vue通過笛卡兒積實現(xiàn)sku庫存配置方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04

最新評論