vue3 element-plus el-table:列表中相同名称的数据实现行合并

jingqw

已于 2023-03-17 11:22:27 修改

阅读量4k

点赞数 2

文章标签： vue.js javascript elementui

于 2023-01-18 14:34:43 首次发布

本文链接：https://blog.csdn.net/qq_21473443/article/details/128726231

版权

效果：

html：

使用el-table的span-method属性控制合并行

<el-table :data="tableData" :span-method="objectSpanMethod" stripe border v-loading="tableLoading">
  <el-table-column prop="oppositeName" label="客户" show-overflow-tooltip>
    <template #default="{ row }">
      <div :class="row.dataType == '2' || row.dataType == '3' ? 'name-total-cell' : ''">{{
        row.oppositeName
      }}</div>
    </template>
  </el-table-column>
  <el-table-column prop="goodsName" label="煤种" show-overflow-tooltip></el-table-column>
  <el-table-column prop="goodsPrice" label="单价（元）" show-overflow-tooltip></el-table-column>
  <el-table-column prop="trucSum" label="车数（辆）" show-overflow-tooltip></el-table-column>
  <el-table-column prop="tonSum" label="拉运吨数（吨）" show-overflow-tooltip></el-table-column>
</el-table>

js：

handleTableData: 处理表格数据，将同一名称的数据进行组合
objectSpanMethod：合并单元格

// data 
// 分页数据
const pageData = ref({
  total: 0,
  page: 1,
  pageSize: 10,
});
let tableLoading = ref(false);
let tableData = ref([]);
let rowSpanArr = ref([]);
interface SpanMethodProps {
  row: any;
  column: any;
  rowIndex: number;
  columnIndex: number;
}

// onMounted
  onMounted(() => {
    getTableData();
  });

// methods
// 获取表格数据
  const getTableData = (page?: number) => {
    tableLoading.value = true;
    if (page) {
      pageData.value.page = page;
    }
    let params = {...pageData.value};
    http
      .post('/smart-order-service/orderDispatchStatistics/orderDispatchStatistics', params)
      .then((res) => {
        if (res && res.data) {
          tableData.value = res.data || [];
          handleTableData(tableData.value);
          if (pageData.value.page === 1) pageData.value.total = res.data.total || 0;
        } else {
          tableData.value = [];
          pageData.value.total = 0;
        }
      })
      .finally(() => {
        tableLoading.value = false;
      });
  };

  // 获取相同名称的个数     tableData: 表格的数据, oppositeName: 确定相同的参数
  const handleTableData = (tableData: any) => {
    let rowSpanList = <any>[],
      position = 0;
    for (let [index, item] of tableData.entries()) {
      if (index == 0) {
        rowSpanList.push(1);
        position = 0;
      } else {
        if (item['oppositeName']) {
          if (item['oppositeName'] == tableData[index - 1]['oppositeName']) {
            rowSpanList[position] += 1; //项目名称相同，合并到同一个数组中
            rowSpanList.push(0);
          } else {
            rowSpanList.push(1);
            position = index;
          }
        } else {
          rowSpanList.push(1);
          position = index;
        }
      }
    }
    rowSpanArr.value = rowSpanList;
  };
  // 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
  const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
    if (columnIndex === 0) {
      // 普通数据
      if (row.dataType == 1) {
        const rowSpan = rowSpanArr.value[rowIndex];
        return [rowSpan, 1];
      } else {
        // 小计
        if (row.dataType == 2) {
          row.oppositeName = '小计';
          return [1, 3];
        }
        // 总计
        if (row.dataType == 3) {
          row.oppositeName = '总计';
          return [1, 3];
        }
      }
    }
    if (columnIndex === 1 || columnIndex === 2) {
      if (row.dataType == 2 || row.dataType == 3) {
        return [0, 0];
      }
    }
  };