小工具知识网

当前位置: 首页 > 行业知识 > element-plus表格合并

行业知识

element-plus表格合并

2026-11-07 22:43:09 来源:互联网转载

要实���这样的表格, 怎么做呢?

甚至是这种三级的呢?

官网的案例也是通过这个方法进行配置的,也就是说表格长什么样,关键在怎么处理的方法上。

 这是官网的方法,可参考拓展:

const arraySpanMethod = ({  row,  column,  rowIndex,  columnIndex,}: SpanMethodProps) => {  if (rowIndex % 2 === 0) {    if (columnIndex === 0) {      return [1, 2]    } else if (columnIndex === 1) {      return [0, 0]    }  }}const objectSpanMethod = ({  row,  column,  rowIndex,  columnIndex,}: SpanMethodProps) => {  if (columnIndex === 0) {    if (rowIndex % 2 === 0) {      return {        rowspan: 2,        colspan: 1,      }    } else {      return {        rowspan: 0,        colspan: 0,      }    }  }}

不过它这里的方法并不符合我的要求,假如还有四级的呢?

 话不多说,给我的代码,相关注释有说明:

                                                            import Commonhead from "../src/components/Commonhead.vue";const title = ref("项目管理 > 巡检记录 > 巡检记录详情");onMounted(() => {  dealList();});const multipleTableRef = ref();const list = ref([  // 忽略表格合并,每一行的数据,str1-6,代表几级数据,也可以简易理解为第几列的数据(从上往下顺序)  {    str1: "遵章守法",    str2: "(1)工作时间打牌、下棋、串岗或无故脱岗",    str3: "是",    str4: "备注内容备注内容备注内容",  },  {    str1: "遵章守法",    str2: "(2)上班时睡觉、在禁烟区内吸烟、吃东西、看书报、听收音机及做与工作无关的事情",    str3: "不是",    str4: "无",  },  {    str1: "岗位职责",    str2: "(1)未认真履行岗位职责,保洁工作达不到质量标准,未造成影响和损失",    str3: "不是",    str4: "无",  },]);// 当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex// 表格合并的方法const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {  // 返回一个包含两个元素的数组,第一个元素代表 rowspan,第二个元素代表 colspan  if (columnIndex === 0) {    return {      rowspan: row.rowspan,      colspan: row.colspan,    };  } else if (columnIndex === 1) {    return {      rowspan: row.rowspan2,      colspan: row.colspan2,    };  } else if (columnIndex === 2) {    return {      rowspan: row.rowspan3,      colspan: row.colspan3,    };  } else {    return {      rowspan: 1,      colspan: 1,    };  }};// 处理列表const dealList = () => {  if (list.value.length === 0) return;  list.value.forEach((item, index) => {    item.colspan = 1;    item.rowspan = 1;    item.colspan2 = 1;    item.rowspan2 = 1;    item.colspan3 = 1;    item.rowspan3 = 1;  });  list.value.reverse()    for (let i = 0; i  {  if (a["str1"] == b["str1"]) {    if (a["str2"] == b["str2"]) {      if (a["str3"]  

将每一条数据进行遍历,相关的字段把它合并在一起。可以简单理解为本来都没有合并,每一条从上往下为每一行,要是有相同的字段,就把单元格合并。(例如:俩个1,只取一个1)。

上一篇:uni-app之android离线自定义基座

下一篇:局域网共享服务器怎么?