vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 elementplus table合并

vue3 elementplus table合并写法

作者：你眼中的柔情

这篇文章主要介绍了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函数

(利用render函数插入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实现Table表格的行合并（单个及多个）

实现结果

在这里插入图片描述

    <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="参数级别"
        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="创建人"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column label="创建时间" show-overflow-tooltip align="center">
        <template #default="{ row }">{{
          dateFormat(row.createTime, 'yyyy-MM-dd')
        }}</template>
      </el-table-column>
    </el-table>

实现方法

interface ObjInterface {
  [key: string]: any; // 字段扩展声明
}
/**
 * @description 合并表格行
 * @export
 * @param {object[]} data 表格数据
 * @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 说明数据是第一行, 需要重新赋值
    if (i == 0) {
      // idArray.push(1) 说明这一行数据被显示出来
      idArray.push(1);
      // idPos = 0 重置当前的计数器
      idPos = 0;
    }
    // 说明不是从第一行开始遍历的
    else {
      if (otherRowName) {
        //主行之外的 另一行合并
        if (
          data[i][rowName] == data[i - 1][rowName] &&
          data[i][otherRowName] == data[i - 1][otherRowName]
        ) {
          // 如果相同就需要将 idArray 的数据自加
          idArray[idPos] += 1;
          // 同时需要将 idArray push一个0 表示下一行不用显示
          idArray.push(0);
        }
        // 说明 当前的数据和上一行的指定数据不同
        else {
          // idArray.push(1) 说明当前一行的数据需要显示
          idArray.push(1);
          // 重新给计数器赋值
          idPos = i;
        }
      } else {
        // 判断当前的指定数据是否和之前的指定数据值相同
        if (data[i][rowName] == data[i - 1][rowName]) {
          // 如果相同就需要将 idArray 的数据自加
          idArray[idPos] += 1;
          // 同时需要将 idArray push一个0 表示下一行不用显示
          idArray.push(0);
        }
        // 说明 当前的数据和上一行的指定数据不同
        else {
          // idArray.push(1) 说明当前一行的数据需要显示
          idArray.push(1);
          // 重新给计数器赋值
          idPos = i;
        }
      }
    }
  }
  return idArray;
}

调用方法

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] 取出当前存放行的合并状态
    const rowSpan = rowMergeArr[rowIndex];
    // 判断当前的 列是否需要显示
    const colSpan = rowSpan > 0 ? 1 : 0;
    return {
      rowspan: rowSpan,
      colspan: colSpan
    };
  }
  // level列之后的 type列
  if (columnIndex === 3) {
    // rowMergeArr[rowIndex] 取出当前存放行的合并状态
    const rowSpan = rowMergeArr1[rowIndex];
    // 判断当前的 列是否需要显示
    const colSpan = rowSpan > 0 ? 1 : 0;
    return {
      rowspan: rowSpan,
      colspan: colSpan
    };
  }
  // ...如果还有继续
};
onMounted(() => {
  rowMergeArr = tableRowMerge(state.tableDataList, 'level');// 主列的行合并
  rowMergeArr1 = tableRowMerge(state.tableDataList, 'level', 'type');// 其他列的行合并
});

到此这篇关于vue3 elementplus table合并的文章就介绍到这了,更多相关vue3 elementplus table合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文