网站首页 > 博客文章 正文
实现的方法:highLightCard 为需要合并的字段(注意,这里根据需求修改字段)
处理函数(联调后,对返回数据data进行匹配):
//用来接收匹配的结果
const myArray = ref([]);
const setRowSpan = (data) => {
//保存上一个name
let x = "";
//相同name出现的次数
let count = 0;
//该name第一次出现的位置
let startindex = 0;
for (let i = 0; i < data.length; i++) {
//字段 highLightCard
console.log(data[i].highLightCard);
//这里是指定需要合并的列
let val = data[i].highLightCard;
if (i === 0) {
x = val;
count = 1;
myArray.value[0] = 1;
} else {
if (val === x) {
count++;
myArray.value[startindex] = count;
myArray.value[i] = 0;
} else {
count = 1;
x = val;
startindex = i;
myArray.value[i] = 1;
}
}
}
};
//api 返回数据 res.result.resultList
//接收赋值给表格
tableData.value = res.result.resultList;
//对数据进行匹配
setRowSpan(tableData.value);
表格
<a-table :dataSource="tableData" :columns="columns" />
表头,重点在 customCell ,return { rowSpan: myArray.value[rowIndex] },我这边用了isEditID.value || isEdit.value 判断内嵌编辑,编辑状态默认返回 { rowSpan: 1 }
const tableColumns = reactive([
{
title: "领先标志",
width: "25%",
dataIndex: "highLightCard",
render: (row, dataIndex, index) => {
//这里判断是否是进入编辑状态
if (isEditID.value || isEdit.value) {
return (
<a-input
size="small"
v-model:value={row.highLightCard}
onChange={(e) => {
editObj.value = row;
}}
/>
);
}
return <span>{row[dataIndex]}</span>;
},
customCell: (record, rowIndex, column) => {
if (isEditID.value || isEdit.value) {
return { rowSpan: 1 };
}
return { rowSpan: myArray.value[rowIndex] };
},
},
{
title: "序号",
width: "4%",
dataIndex: "sort",
align: "center",
}])
猜你喜欢
- 2024-10-27 ES6扩展运算符:详解与实践(es6扩展运算符深拷贝)
- 2024-10-27 Excel|文本花样连接,CONCATENATE、CONCAT、TEXTJOIN帮你完成
- 2024-10-27 Javascript中数组的方法(javascript 数组方法)
- 2024-10-27 LeetCode题集-4 - 寻找两个有序数组的中位数,六种解法,万字讲解
- 2024-10-27 JS中的Array对象——数组的合并、转换、迭代、排序、堆栈
- 2024-10-27 JavaScript 数组方法的介绍(javascript数组方法有哪些)
- 2024-10-27 vue数组更新后不渲染页面与$set的渊源
- 2024-10-27 vue-router的基本使用(vue- router)
- 2024-10-27 ???数组中的逆序对(归并排序思想)
- 2024-10-27 数据分析工具:Pandas架构分析(pandas数据分析模型)
你 发表评论:
欢迎- 367℃用AI Agent治理微服务的复杂性问题|QCon
- 358℃初次使用IntelliJ IDEA新建Maven项目
- 357℃手把手教程「JavaWeb」优雅的SpringMvc+Mybatis整合之路
- 351℃Maven技术方案最全手册(mavena)
- 348℃安利Touch Bar 专属应用,让闲置的Touch Bar活跃起来!
- 346℃InfoQ 2024 年趋势报告:架构篇(infoq+2024+年趋势报告:架构篇分析)
- 345℃IntelliJ IDEA 2018版本和2022版本创建 Maven 项目对比
- 342℃从头搭建 IntelliJ IDEA 环境(intellij idea建包)
- 最近发表
- 标签列表
-
- powershellfor (55)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)