elementbi表格的列合并，注意这是列合并不是行合并，以及表格动态列显示与隐藏

已于 2024-02-27 08:52:43 修改
阅读量368 收藏 6
点赞数 9
文章标签： java 前端 javascript
于 2024-01-21 10:19:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sisuiban/article/details/135726155
版权

先准备列合并代码

//先准备列合并代码
export function rowMergeHandle(arr, data) {
  if (!Array.isArray(arr) && !arr.length) return false;
  if (!Array.isArray(data) && !data.length) return false;
  let needMerge = {};
  arr.forEach((i, idx) => {
      needMerge[i] = {
          rowArr: [],
          rowMergeNum: 0,
      };
      if (idx == 0) {
          data.forEach((item, index) => {
              // 表格首个数据单独处理
              if (index === 0) {
                  needMerge[i].rowArr.push(1);
                  needMerge[i].rowMergeNum = 0;
              } else {
                  if (item[i] === data[index - 1][i]) {
                      needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                      needMerge[i].rowArr.push(0);
                  } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                  }
              }
          });
      } else {
          let firstRowArr = needMerge[arr[0]].rowArr;
          let firstRowArrDeal = [];
          firstRowArr.forEach((item, index) => {
              if (item > 0) {
                  firstRowArrDeal.push(index);
              }
          });
          data.forEach((item, index) => {
              let sign = false;
              if (firstRowArrDeal.indexOf(index) > 0) {
                  needMerge[i].rowMergeNum = index;
                  sign = true;
              }
              // 表格首个数据单独处理
              if (index === 0) {
                  needMerge[i].rowArr.push(1);
                  needMerge[i].rowMergeNum = 0;
              } else {
                  if (item[i] === data[index - 1][i]) {
                      if (sign) {
                          needMerge[i].rowArr.push(1);
                      } else {
                          needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                          needMerge[i].rowArr.push(0);
                      }
                  } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                  }
              }
          });
      }
  });
  return needMerge;
}
  • 引入列合并代码 import { rowMergeHandle } from “…/…/utile/tool”;
  • 在准备两个容器，一个放需要合并的字段，一个方空数组：
    • needMergeArr: [“title”,“formId”,“问卷操作”], //这里面放需要合并的字段
    • rowMergeArrs: [], //这里是空数组
/***
needMergeArr  就是上边定义的需要合并的字段数组
rowMergeArrs  就是上班定义的空数组
*/
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
 for (let res in needMergeArr) {
   if (needMergeArr[res] == column.property) {
     return mergeAction(column.property, rowIndex, columnIndex);
   }
 }

}
const mergeAction = (val, rowIndex) => {
 let _row = .rowMergeArrs[val].rowArr[rowIndex];
 let _col = _row > 0 ? 1 : 0;
 return [_row, _col];
}

完整的代码例子



  // 列合并函数
export function rowMergeHandle(arr, data) {
  if (!Array.isArray(arr) && !arr.length) return false;
  if (!Array.isArray(data) && !data.length) return false;
  let needMerge = {};
  arr.forEach((i, idx) => {
      needMerge[i] = {
          rowArr: [],
          rowMergeNum: 0,
      };
      if (idx == 0) {
          data.forEach((item, index) => {
              // 表格首个数据单独处理
              if (index === 0) {
                  needMerge[i].rowArr.push(1);
                  needMerge[i].rowMergeNum = 0;
              } else {
                  if (item[i] === data[index - 1][i]) {
                      needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                      needMerge[i].rowArr.push(0);
                  } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                  }
              }
          });
      } else {
          let firstRowArr = needMerge[arr[0]].rowArr;
          let firstRowArrDeal = [];
          firstRowArr.forEach((item, index) => {
              if (item > 0) {
                  firstRowArrDeal.push(index);
              }
          });
          data.forEach((item, index) => {
              let sign = false;
              if (firstRowArrDeal.indexOf(index) > 0) {
                  needMerge[i].rowMergeNum = index;
                  sign = true;
              }
              // 表格首个数据单独处理
              if (index === 0) {
                  needMerge[i].rowArr.push(1);
                  needMerge[i].rowMergeNum = 0;
              } else {
                  if (item[i] === data[index - 1][i]) {
                      if (sign) {
                          needMerge[i].rowArr.push(1);
                      } else {
                          needMerge[i].rowArr[needMerge[i].rowMergeNum] += 1;
                          needMerge[i].rowArr.push(0);
                      }
                  } else {
                      needMerge[i].rowArr.push(1);
                      needMerge[i].rowMergeNum = index;
                  }
              }
          });
      }
  });
  return needMerge;
}


//上边是列合并函数
<template>
    <div class="home">
      <el-container class="page-main">
        
        <el-main class="main-table_container">
          <div :style="{
            height: queryParams.toolQuery.queryParamsShow
              ? 'calc(100% - 200px)'
              : 'calc(100% - 180px)',
          }">
            <el-table :data="queryParams.tableConfig.tableData.all" @selection-change="Home_SelectionChange"
              :element-loading-text="queryParams.loadingTxt" v-loading="queryParams.loading.table" highlight-current-row
              size="small" height="calc(100vh - 120px)" ref="tableData" id="exportTab" border
              header-cell-class-name="my-header-cellTwo" :span-method="objectSpanMethod">
              <el-table-column align="center" type="selection" width="55" />
  
              <!-- <el-table-column type="index" width="50" fixed> </el-table-column> -->
              <template v-for="(
                  column, index
                ) in queryParams.tableConfig.tableColumn.filter(
                  (item) => item.show
                )">
                <el-table-column v-if="column.field === 'jobtime'" :prop="column.field" :label="column.label"
                  :min-width="column.width" :sortable="column.sortable ? true : false">
                  <template #default="scope">
                    <span>{{ dateFormat(scope.row.jobtime) }} </span>
                  </template>
                </el-table-column>
  
                <el-table-column v-else-if="column.field === 'sfid'" :prop="column.field" :label="column.label"
                  :min-width="column.width" :sortable="column.sortable ? true : false">
                  <template #default="scope">
                    <span>{{ scope.row.sfid }} </span>
                  </template>
                </el-table-column>
  
                <el-table-column v-else :label="column.label" :fixed="column.fixed" :min-width="column.width"
                  :prop="column.field" :sortable="column.sortable ? true : false">
                </el-table-column>
              </template>
  
              <el-table-column fixed="right" align="center" label="问题操作" width="100">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="FN_Sealp(scope.row, 'edit')">编辑</el-button>
                  <el-button link type="danger" size="small" @click="FN_Sealp(scope.row, 'del')">删除</el-button>
                </template>
              </el-table-column>
              <el-table-column fixed="right" align="center" label="问卷操作" prop="问卷操作" width="100">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="FN_Sealp(scope.row, 'edit')">编辑</el-button>
                  <el-button link type="danger" size="small" @click="FN_Sealp(scope.row, 'del')">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </div>
  </template>
  <script setup>
  import { ref, onMounted, nextTick, defineComponent, createVNode } from "vue";
  
  import {
    GetQuestionList,
  } from "../../api/OnlineConsultation/index";
  import {
    rowMergeHandle
  } from "../../utile/tool";
  
  const tableData = ref(null);
  const fullscreenLoading = ref(false);
  let queryParams = ref({
      action: false,
      Cookie_USER: null,
      loadingTxt: "",
      loading: {
        table: false,
      },

      tableConfig: {
        tableData: {
          all: [],
        },
        tableColumn: [
          {
            field: "title",
            show: true,
            width: "",
            label: "问卷标题",
            sortable: false,
          },
          {
            field: "formId",
            show: true,
            width: "",
            label: "问卷编号",
            sortable: false,
          },
          {
            field: "questionText",
            show: true,
            width: "",
            label: "问题",
            sortable: false,
          },
          {
            field: "createDate",
            show: true,
            width: "",
            label: "创建时间",
            sortable: false,
          },
        ],
      },
      pageConfig: {
        //每页行数F_IsCutOff
        limit: 50,
        // 当前页
        page: 1,
        //总记录数
        count: 0,
      },
      needMergeArr: ["title", "formId", "问卷操作"], //需要合并的字段
      rowMergeArrs: [],
  })
  // 列表初始化
  const getPageList = () => {
    let obj = {
      name: queryParams.value.toolQuery.queryParams.openarea, //发放地
      page: queryParams.value.pageConfig.page,
      limit: queryParams.value.pageConfig.limit,
    };
    queryParams.value.loading.table = true;
    queryParams.value.loadingTxt = "加载中。。。";
  
    window.setTimeout(() => {
      queryParams.value.tableConfig.tableData.all = [];
      GetQuestionList(obj).then((res) => {
        if (res.code !== 200) {
          ElNotification({
            title: "失败",
            message: res.msg,
            type: "error",
          });
          return;
        }
  
        queryParams.value.loading.table = false;
        queryParams.value.loadingTxt = "";
        queryParams.value.tableConfig.tableData.all = res.data.list;
        queryParams.value.pageConfig.count = res.data.count;
        queryParams.value.rowMergeArrs = rowMergeHandle(queryParams.value.needMergeArr, res.data.list)
        nextTick(() => {
          if (tableData.value && tableData.value.doLayout) {
            tableData.value.doLayout();
          }
        });
      });
    }, 300);
  };
  
  const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    for (let res in queryParams.value.needMergeArr) {
      if (queryParams.value.needMergeArr[res] == column.property) {
        return mergeAction(column.property, rowIndex, columnIndex);
      }
    }
  
  }
  const mergeAction = (val, rowIndex) => {
    let _row = queryParams.value.rowMergeArrs[val].rowArr[rowIndex];
    let _col = _row > 0 ? 1 : 0;
    return [_row, _col];
  }
  
 
  onMounted(() => {
  });
  </script>
    
  
  <style>
  .my-header-cellTwo {
    font-weight: bold !important;
    background: #f2f6fc !important;
    color: #303133;
  }
  
  .el-table__body tr:hover>td {
  
    background-color: #ffc0cb !important;
  
  }
  </style>

接下来是表格的列动态显示与隐藏

<template>
  <div>
    <div style="height: 30px;background-color: #e9afaf;">
      <el-button type="warning" round size="small" @click="onClick_list"
        >自定义列表</el-button
      >
    </div>
    <el-table
      :data="queryParams.tableConfig.tableData.all"
      :element-loading-text="queryParams.loadingTxt"
      v-loading="queryParams.loading.table"
      size="small"
      height="calc(100vh - 114px)"
      ref="tableData"
      id="exportTab"
      border
      header-cell-class-name="my-header-cell"
    >
      <template
        v-for="(column, index) in queryParams.tableConfig.tableColumn.filter(
          (item) => item.show
        )"
      >
        <el-table-column
          v-if="column.field === 'filltime'"
          :prop="column.field"
          :label="column.label"
          :min-width="column.width"
          :sortable="column.sortable ? true : false"
        >
          <template #default="scope">
            <span>{{ scope.row.filltime }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          :label="column.label"
          :fixed="column.fixed"
          :width="column.width"
          :prop="column.field"
          :sortable="column.sortable ? true : false"
        >
        </el-table-column>
      </template>
      <el-table-column fixed="right" align="center" label="操作" width="120">
        <template #default="scope">
          <el-button link type="danger" size="small">查看身份图片</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      v-model="mainTableColumnConfig.modalShow"
      title="自定义列表"
      direction="rtl"
      size="80%"
      :close-on-click-modal="false"
      :show-close="false"
      destroy-on-close
    >
      <template #header="{ close, titleId, titleClass }">
        <h4 :id="titleId" :class="titleClass">设置表格显示列</h4>
        <el-button type="success" round @click="onClick_QR">确认设置</el-button>
        <el-button type="primary" round @click="onClick_HY">还原设置</el-button>

        <el-button round @click="mainTableColumnConfig.modalShow = false"
          >关闭页面</el-button
        >
      </template>

      <div class="column-config_container" :style="{ margin: '-20px 0' }">
        <template
          v-for="(column, index) in mainTableColumnConfig.columns"
          :key="index"
        >
          <el-checkbox
            v-model="column.show"
            :label="column.label"
            :style="{
              width: 'calc(20% - 20px)',
              margin: '5px 20px 0 0',
              overflow: 'hidden',
            }"
            :data-index="index"
            border
          ></el-checkbox>
        </template>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
const tableData = ref(null);
let queryParams = ref({
  loadingTxt: "",
  loading: {
    table: false,
  },
  toolQuery: {
    queryParams: {
      name: null,
      type: null,
      kaishi: null,
      jieshu: null,
      sendtype: null,
    },
    queryParamsShow: true,
  },
  tableConfig: {
    tableData: {
      all: [],
    },
    // 显示列
    tableColumn: [
      {
        field: "man",
        show: true,
        label: "名片归属人",
        width: "",
        sortable: true,
      },
      {
        field: "deptname",
        show: true,
        label: "部门",
        width: "",
        sortable: false,
      },
      {
        field: "grouptitle",
        show: true,
        label: "群组",
        width: "",
        sortable: true,
      },
      {
        field: "name",
        show: true,
        label: "姓名",
        width: "",
        sortable: true,
      },
      {
        field: "sfid",
        show: true,
        label: "身份证",
        width: "",
        sortable: true,
      },

      {
        field: "cardId",
        show: false,
        label: "名片ID",
        width: "",
        sortable: false,
      },
      {
        field: "email",
        show: true,
        label: "邮箱账号",
        width: "",
        sortable: false,
      },

      {
        field: "job",
        show: true,
        label: "意向工作类型",
        width: "",
        sortable: false,
      },
      {
        field: "city",
        show: true,
        label: "意向城市",
        width: "",
        sortable: false,
      },
      {
        field: "label",
        show: true,
        label: "个性标签",
        width: "",
        sortable: false,
      },
      {
        field: "mobantype",
        show: false,
        label: "名片类型",
        width: "",
        sortable: false,
      },
      {
        field: "phone",
        show: true,
        label: "联系方式",
        width: "",
        sortable: false,
      },
      {
        field: "send",
        show: true,
        label: "名片来源方式",
        width: "",
        sortable: false,
      },
      {
        field: "filltime",
        show: true,
        label: "时间",
        width: "",
        sortable: true,
      },
      {
        field: "introduce",
        show: false,
        label: "个人简介",
        width: "",
        sortable: false,
      },
    ],
    // 所有列
    tableLook: [
      {
        field: "man",
        show: true,
        label: "名片归属人",
        width: "",
        sortable: true,
      },
      {
        field: "deptname",
        show: true,
        label: "部门",
        width: "",
        sortable: false,
      },
      {
        field: "grouptitle",
        show: true,
        label: "群组",
        width: "",
        sortable: true,
      },
      {
        field: "name",
        show: true,
        label: "姓名",
        width: "",
        sortable: true,
      },
      {
        field: "sfid",
        show: true,
        label: "身份证",
        width: "",
        sortable: true,
      },

      {
        field: "cardId",
        show: false,
        label: "名片ID",
        width: "",
        sortable: false,
      },
      {
        field: "email",
        show: true,
        label: "邮箱账号",
        width: "",
        sortable: false,
      },

      {
        field: "job",
        show: true,
        label: "意向工作类型",
        width: "",
        sortable: false,
      },
      {
        field: "city",
        show: true,
        label: "意向城市",
        width: "",
        sortable: false,
      },
      {
        field: "label",
        show: true,
        label: "个性标签",
        width: "",
        sortable: false,
      },
      {
        field: "mobantype",
        show: false,
        label: "名片类型",
        width: "",
        sortable: false,
      },
      {
        field: "phone",
        show: true,
        label: "联系方式",
        width: "",
        sortable: false,
      },
      {
        field: "send",
        show: true,
        label: "名片来源方式",
        width: "",
        sortable: false,
      },
      {
        field: "filltime",
        show: true,
        label: "时间",
        width: "",
        sortable: true,
      },
      {
        field: "introduce",
        show: false,
        label: "个人简介",
        width: "",
        sortable: false,
      },
    ],
  },
});

/**
 * 自定义列表
 * * */
let mainTableColumnConfig = ref({
  modalShow: false,
  dropCell: null,
  columns: [],
});
// 打开弹窗
const onClick_list = () => {
  mainTableColumnConfig.value.columns = JSON.parse(
    JSON.stringify(queryParams.value.tableConfig.tableColumn)
  );
  mainTableColumnConfig.value.modalShow = true;
};
// 还原设置
const onClick_HY = () => {
  const checkBoxs = JSON.parse(
    JSON.stringify(queryParams.value.tableConfig.tableLook)
  );
  queryParams.value.tableConfig.tableColumn = checkBoxs;
  nextTick(() => {
    tableData.value.doLayout();
    mainTableColumnConfig.value.modalShow = false;
  });
};
// 确认
const onClick_QR = () => {
  const checkBoxs = mainTableColumnConfig.value.columns;
  queryParams.value.tableConfig.tableColumn = checkBoxs;
  nextTick(() => {
    tableData.value.doLayout();
    mainTableColumnConfig.value.modalShow = false;
  });
};

onMounted(() => {});
</script>
<style scoped>
</style>

在这里插入图片描述
在这里插入图片描述

四岁爱上了她
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

四岁爱上了她

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值