厦门湖里区建设局网站,网站建设入什么费用,做h5长图网站,淄博网站制作开发优化要实现这样的表格#xff0c; 怎么做呢#xff1f;
甚至是这种三级的呢#xff1f; 官网的案例也是通过这个方法进行配置的#xff0c;也就是说表格长什么样#xff0c;关键在怎么处理的方法上。 这是官网的方法#xff0c;可参考拓展#xff1a;
const arraySpanMeth…
要实现这样的表格 怎么做呢
甚至是这种三级的呢 官网的案例也是通过这个方法进行配置的也就是说表格长什么样关键在怎么处理的方法上。 这是官网的方法可参考拓展
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,}}}
}不过它这里的方法并不符合我的要求假如还有四级的呢 话不多说给我的代码相关注释有说明
templatediv classcontainerCommonhead :titletitle/Commonheaddiv classtableel-table:span-methodobjectSpanMethodrefmultipleTableRefborder:datalistel-table-column label类型 propstr1 min-width180 /el-table-column label考核内容 propstr2 min-width180 /el-table-column label结果 propstr3 min-width180 /el-table-column label备注 propstr4 min-width180 //el-table/div/div
/templatescript setup
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第二个元素代表 colspanif (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 list.value.length; i) {// 列合并处理if (i 1 list.value.length list.value[i].str1 list.value[i 1].str1) {list.value[i 1].rowspan list.value[i].rowspan 1;list.value[i].rowspan 0;}if (i 1 list.value.length list.value[i].str2 list.value[i 1].str2) {list.value[i 1].rowspan2 list.value[i].rowspan2 1;list.value[i].rowspan2 0;}if (i 1 list.value.length list.value[i].str3 list.value[i 1].str3) {list.value[i 1].rowspan3 list.value[i].rowspan3 1;list.value[i].rowspan3 0;}// 行合并处理if (list.value[i].str2 ) {list.value[i].colspan 2;list.value[i].colspan2 0;list.value[i].colspan3 0;}if (list.value[i].str3 ) {list.value[i].colspan 1;list.value[i].colspan2 2;list.value[i].colspan3 0;}if (list.value[i].str3 ! ) {list.value[i].colspan 1;list.value[i].colspan2 1;list.value[i].colspan3 1;}}list.value.reverse();
};// 整理数据列表的数据将相同的数据段合并
const dataSort (a, b) {if (a[str1] b[str1]) {if (a[str2] b[str2]) {if (a[str3] b[str3]) {return -1;}} else {if (a[str2] b[str2]) {return -1;} else {return 1;}}} else {if (a[str1] b[str1]) {return -1;} else {return 1;}}
};
/scriptstyle scoped
.container {padding: 20px;
}
.table {width: 1000px;margin: 0 auto;
}
/style将每一条数据进行遍历相关的字段把它合并在一起。可以简单理解为本来都没有合并每一条从上往下为每一行要是有相同的字段就把单元格合并。例如俩个1只取一个1。
