网站首页 > 博客文章 正文
实现的方法: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数据分析模型)
你 发表评论:
欢迎- 最近发表
-
- 解决Win10打开软件提示“服务器没有及时响应或控制请求”
- 用友UAP解开非结构化大数据处理与分析的密码
- Windows 25H2 修复底层崩溃(windows修复环境)
- 开源技巧:使用Docker实现交互式任务
- Win11 任意版本 直接安装 Android 应用 教程完整版
- Windows Terminal已成为Windows 11操作系统的默认终端
- 那些好莱坞电影中炫酷的特效 原来是这么拍的
- Windows 10 Build 21327.1010发布:测试服务管道更新
- Made in China: The story behind the label
- PowerShell登录远程Linux系统(powershell开启远程桌面)
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- googlecloud (64)
- flutterrun (59)
- 系统设计图 (58)
- powershellfor (73)
- 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)
- qcombobox样式表 (68)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)