vue3 elementplus table合并寫法

更新時間：2023年06月29日 10:43:19 作者：你眼中的柔情

這篇文章主要介紹了vue3 elementplus table合并寫法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

vue3 elementplus table合并寫法

table表格下方合并寫法：

1：單行合并

（1）在標簽中加入屬性

   :summary-method="getSummaries"
            :show-summary="true"

 <el-table
            :data="data"
            id="tableRef"
            ref="tableRef"
            row-key="belnr"
            class="td-bacg-white"
            :summary-method="getSummaries"
            :show-summary="true"
          >
            <template v-for="(item1, index1) in tableColumns">
              <template v-if="item1.children">
                <el-table-column
                  :key="index1"
                  :label="item1.title"
                  align="center"
                >
                  <template v-for="item in item1.children">
                    <el-table-column
                      v-if="!item.hidden"
                      :align="item.align || 'center'"
                      :prop="item.dataIndex"
                      :label="item.title"
                      :min-width="item.width"
                      :key="item.dataIndex"
                      :show-overflow-tooltip="
                      item.overflow === false ? false : true
                    "
                    >
                      <template #default="scope">
              <template >
                <el-table-column
                  :align="item1.align || 'center'"
                  :key="index1"
                  :prop="item1.dataIndex"
                  :label="item1.title"
                  :fixed="item1.fixed || false"
                  :min-width="item1.width"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span
                      v-if="item1.filterType === 'toThousandFilter'"
                    >
                    {{
                        toThousandFilter(
                          Number(scope.row[`${item1.dataIndex}`] || 0)
                        )
                      }}
                  </span>
                  <span v-else-if="item1.dataIndex === 'ii'">
                      <span>{{ scope.row[`${item1.dataIndex}`] }}%</span>
                  </span>
                    <span v-else>
                    <span>{{ scope.row[`${item1.dataIndex}`] }}</span>
                  </span>
                  </template>
                </el-table-column>
              </template>
            </template>
          </el-table>

（2）合并方法

下方判斷字段為 uu ii 的兩個字段計算合并。

/**
 * 合計
 */
interface SummaryMethodProps<T = SpmxListType> {
  columns: TableColumnCtx<T>[];
  data: T[];
}
function getSummaries(param: SummaryMethodProps) {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 1) {
      sums[index] = '合計';
      return;
    }
    if (
      column.property !== 'uu' &&
      column.property !== 'ii'
    ) {
      sums[index] = '';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    console.log(columns, '==columns');
    if (!values.every(value => isNaN(value))) {
      sums[index] = values
        .reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0)
        .toString();
      sums[index] = Number(sums[index]).toFixed(2);
      if (
        column.property === 'ii'
      ) {
        // 加百分號
        sums[index] = sums[index]+'%';
      }else{
        // 加千葉符
        sums[index] = toThousandFilter(Number(sums[index]));
      }
    } else {
      sums[index] = '';
    }
  });
  console.log(sums);
  return sums;
}

2.如果下方合并是兩行的，用到Render函數(shù)

(利用render函數(shù)插入2個div作為2行展示)

function getSummaries(param: SummaryMethodProps) {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      // sums[index] = '小計 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '小計 total', ),
        h("div", '% of total', ),
      ]);
      // sums[index] =  <div>
      //     <div>合計</div>
      //   <div> 備注</div>
      //   </div>;
      return;
    }
    if (index === 1) {
      // sums[index] = '小計 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '1234567', ),
        h("br", '', ),
      ]);
      return;
    }   if (index === 2) {
      // sums[index] = '小計 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '100%', ),
        h("div", '12%', ),
      ]);
      return;
    }
    if (index === 3) {
      // sums[index] = '小計 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '1234567', ),
        h("br", '', ),
      ]);
      return;
    }
    if (index === 4) {
      // sums[index] = '小計 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '100%', ),
        h("div", '88%', ),
      ]);
      return;
    }
    if (
      column.property !== 'ee' &&
      column.property !== 'rr'
    ) {
      sums[index] = '';
      return;
    }
  });
  console.log(sums);
  return sums;
}

Vue3+ElementPlus實現(xiàn)Table表格的行合并（單個及多個）

實現(xiàn)結(jié)果

在這里插入圖片描述

    <el-table
      border
      v-loading="state.loading"
      :data="state.tableDataList"
      :height="pagTabHeight"
      row-key="id"
      ref="tableRef"
      :highlight-current-row="true"
      @row-click="rowClick"
      :span-method="objectSpanMethod"
    >
      <el-table-column type="index" label="序號" align="center" />
      <el-table-column
        prop="level"
        label="參數(shù)級別"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="year"
        label="年度"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="type"
        label="評價類型"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="way"
        label="定額方式"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column
        prop="creator"
        label="創(chuàng)建人"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column label="創(chuàng)建時間" show-overflow-tooltip align="center">
        <template #default="{ row }">{{
          dateFormat(row.createTime, 'yyyy-MM-dd')
        }}</template>
      </el-table-column>
    </el-table>

實現(xiàn)方法

interface ObjInterface {
  [key: string]: any; // 字段擴展聲明
}
/**
 * @description 合并表格行
 * @export
 * @param {object[]} data 表格數(shù)據(jù)
 * @param {string} rowName 合并行的name
 * @param {string} otherRowName 合并其他行
 * @return {*}
 */
export function tableRowMerge(
  data: ObjInterface[],
  rowName: string,
  otherRowName?: string
) {
  const idArray = [] as number[];
  let idPos = 0;
  for (let i = 0; i < data.length; i++) {
    // 如果當 i == 0 說明數(shù)據(jù)是第一行, 需要重新賦值
    if (i == 0) {
      // idArray.push(1) 說明這一行數(shù)據(jù)被顯示出來
      idArray.push(1);
      // idPos = 0 重置當前的計數(shù)器
      idPos = 0;
    }
    // 說明不是從第一行開始遍歷的
    else {
      if (otherRowName) {
        //主行之外的 另一行合并
        if (
          data[i][rowName] == data[i - 1][rowName] &&
          data[i][otherRowName] == data[i - 1][otherRowName]
        ) {
          // 如果相同就需要將 idArray 的數(shù)據(jù)自加
          idArray[idPos] += 1;
          // 同時需要將 idArray push一個0 表示下一行不用顯示
          idArray.push(0);
        }
        // 說明 當前的數(shù)據(jù)和上一行的指定數(shù)據(jù)不同
        else {
          // idArray.push(1) 說明當前一行的數(shù)據(jù)需要顯示
          idArray.push(1);
          // 重新給計數(shù)器賦值
          idPos = i;
        }
      } else {
        // 判斷當前的指定數(shù)據(jù)是否和之前的指定數(shù)據(jù)值相同
        if (data[i][rowName] == data[i - 1][rowName]) {
          // 如果相同就需要將 idArray 的數(shù)據(jù)自加
          idArray[idPos] += 1;
          // 同時需要將 idArray push一個0 表示下一行不用顯示
          idArray.push(0);
        }
        // 說明 當前的數(shù)據(jù)和上一行的指定數(shù)據(jù)不同
        else {
          // idArray.push(1) 說明當前一行的數(shù)據(jù)需要顯示
          idArray.push(1);
          // 重新給計數(shù)器賦值
          idPos = i;
        }
      }
    }
  }
  return idArray;
}

調(diào)用方法

let rowMergeArr = [] as number[];
let rowMergeArr1 = [] as number[];
/**
 * @description 合并行
 */
interface SpanMethodProps {
  row: PriceTableItem;
  column: TableColumnCtx<PriceTableItem>;
  rowIndex: number;
  columnIndex: number;
}
const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}: SpanMethodProps) => {
  // level列
  if (columnIndex === 1) {
    // rowMergeArr[rowIndex] 取出當前存放行的合并狀態(tài)
    const rowSpan = rowMergeArr[rowIndex];
    // 判斷當前的 列是否需要顯示
    const colSpan = rowSpan > 0 ? 1 : 0;
    return {
      rowspan: rowSpan,
      colspan: colSpan
    };
  }
  // level列之后的 type列
  if (columnIndex === 3) {
    // rowMergeArr[rowIndex] 取出當前存放行的合并狀態(tài)
    const rowSpan = rowMergeArr1[rowIndex];
    // 判斷當前的 列是否需要顯示
    const colSpan = rowSpan > 0 ? 1 : 0;
    return {
      rowspan: rowSpan,
      colspan: colSpan
    };
  }
  // ...如果還有繼續(xù)
};
onMounted(() => {
  rowMergeArr = tableRowMerge(state.tableDataList, 'level');// 主列的行合并
  rowMergeArr1 = tableRowMerge(state.tableDataList, 'level', 'type');// 其他列的行合并
});

到此這篇關(guān)于vue3 elementplus table合并的文章就介紹到這了,更多相關(guān)vue3 elementplus table合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: