背景
数据为数组包对象，对象里面有属性值是数组；无需处理数据，直接使用el-table包el-table的方法，通过修改el-table的样式直接实现多行合并的效果
html代码
<template><div><el-table size="mini" :data="tableData" v-loading="ruletableLoading" border style="width: 100%" height="calc(100% - 56px)" class="rule-table"><el-table-column label="AA" prop="code" show-overflow-tooltip><template #default="scope"><!-- <div class="item"> --><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.code" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.code }}</div></div></template></el-table-column><el-table-column label="BB" prop="name" show-overflow-tooltip><template #default="scope"><!-- <div class="item"> --><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.name" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.name }}</div></div></template></el-table-column><el-table-column label="CC"><template #default="scope"><el-table :data="scope.row.items" :border="false" :show-header="false" class="no-border-table"><el-table-column prop="name" show-overflow-tooltip><template #default="scope"><!-- <div class="item"> --><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.name" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.name }}</div></div></template></el-table-column></el-table></template></el-table-column><el-table-column label="DD" width="120"><template #default="scope"><el-table :data="scope.row.items" :border="false" :show-header="false" class="no-border-table"><el-table-column prop="percent" show-overflow-tooltip><template #default="scope"><!-- <div class="item"> --><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.percent" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.percent }}</div></div></template></el-table-column></el-table></template></el-table-column><el-table-column label="EE" width="120"><template #default="scope"><el-table :data="scope.row.items" :border="false" :show-header="false" class="no-border-table"><el-table-column prop="score" show-overflow-tooltip><template #default="scope"><!-- <div class="item"> --><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.score" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.score }}</div></div></template></el-table-column></el-table></template></el-table-column><el-table-column label="FF" prop="totalScore" show-overflow-tooltip width="120"><template #default="scope"><!-- <div class="item"> --><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.totalScore" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.totalScore }}</div></div></template></el-table-column><el-table-column label="GG"><template #default="scope"><el-table :data="scope.row.classStandard" :border="false" :show-header="false" class="no-border-table"><el-table-column prop="express" show-overflow-tooltip><template #default="scope"><!-- <div class="item"> --><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.express" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.express }}</div></div></template></el-table-column></el-table></template></el-table-column><el-table-column label="HH"><template #default="scope"><el-table :data="scope.row.classStandard" :border="false" :show-header="false" class="no-border-table"><el-table-column prop="class" show-overflow-tooltip><template #default="scope"><!-- <div class="item"> --><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.class" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.class }}</div></div></template></el-table-column></el-table></template></el-table-column><el-table-column label="II"><template #default="scope"><el-table :data="scope.row.classStandard" :border="false" :show-header="false" class="no-border-table"><el-table-column prop="remark" show-overflow-tooltip><template #default="scope"><div class="cell-content item-normal" @click.stop="cellClick"><el-input size="small" class="item__input" v-model="scope.row.remark" placeholder="请输入" @blur="handleBlur"></el-input><div class="item__txt">{{ scope.row.remark }}</div></div></template></el-table-column></el-table></template></el-table-column></el-table></div></template>js代码
主要是cellClick和handleBlur控制的，首先需要找到包裹el-input和展示表格文字的父div,然后通过点击父div和el-input的失去焦点事件控制内部这两个元素的显示和隐藏
<script setup>
import { ref, computed,onMounted } from 'vue'
import ruletableDataJson from './ruleManage.json'
import { cloneDeep } from 'lodash'const tableData=ref([])onMounted(()=>{tableData.value=[{"id": 9090,"code": "1","name": "密码和车好多看","remark": "","items": [{"id": 6767,"name": "合适的客户收款", "percent": 0.7, "score": 100 },{"id": 89808,"name": "附近的看法好的", "percent": 0.3, "score": 67 }],"classStandard": [{"express": "年卡就诊卡","remark": "活动开始计划的卡号","class": "打开了电视机了"},{"express": "手机多少空间","remark": "简单说来就是了","class": "的"},{"express": "的角度来讲罗迪克","remark": "十九岁的离开拘留所","class": "对手的实力的距离"},{"express": "但是肯定是咯","remark": "发达的","class": "人工费v1"},{"express": "的快捷键","remark": "附近的垃圾分类","class": "分隔符"},{"express": "三大三","remark": "反对反对开始","class": "对顶的"},{"express": "多睡的","remark": "对顶的","class": "对对对对"},{"express": "对顶的","remark": "的舒适性","class": "多睡的"},{"express": "是啥","remark": "都是大客户","class": "山东江苏科技"}]},{"id": 9090,"code": "2","name": "密码和车好多看","remark": "","items": [{"id": 6767,"name": "合适的客户收款", "percent": 0.7, "score": 100 },{"id": 89808,"name": "附近的看法好的", "percent": 0.3, "score": 67 }],"classStandard": [{"express": "年卡就诊卡","remark": "活动开始计划的卡号","class": "打开了电视机了"},{"express": "手机多少空间","remark": "简单说来就是了","class": "的"},{"express": "的角度来讲罗迪克","remark": "十九岁的离开拘留所","class": "对手的实力的距离"},{"express": "但是肯定是咯","remark": "发达的","class": "人工费v1"},{"express": "的快捷键","remark": "附近的垃圾分类","class": "分隔符"},{"express": "三大三","remark": "反对反对开始","class": "对顶的"},{"express": "多睡的","remark": "对顶的","class": "对对对对"},{"express": "对顶的","remark": "的舒适性","class": "多睡的"},{"express": "是啥","remark": "都是大客户","class": "山东江苏科技"}]},{"id": 9090,"code": "3","name": "密码和车好多看","remark": "","items": [{"id": 6767,"name": "合适的客户收款", "percent": 0.7, "score": 100 },{"id": 89808,"name": "附近的看法好的", "percent": 0.3, "score": 67 }],"classStandard": [{"express": "年卡就诊卡","remark": "活动开始计划的卡号","class": "打开了电视机了"},{"express": "手机多少空间","remark": "简单说来就是了","class": "的"},{"express": "的角度来讲罗迪克","remark": "十九岁的离开拘留所","class": "对手的实力的距离"},{"express": "但是肯定是咯","remark": "发达的","class": "人工费v1"},{"express": "的快捷键","remark": "附近的垃圾分类","class": "分隔符"},{"express": "三大三","remark": "反对反对开始","class": "对顶的"},{"express": "多睡的","remark": "对顶的","class": "对对对对"},{"express": "对顶的","remark": "的舒适性","class": "多睡的"},{"express": "是啥","remark": "都是大客户","class": "山东江苏科技"}]},]
})const cellClick = e => {let element = e.target.parentNodeelement.classList.remove('item-normal')element.classList.add('item-edit')
}const handleBlur = e => {let element = e.target.parentNode.parentNodeelement.classList.remove('item-edit')element.classList.add('item-normal')dotShow.value=true
}
</script>scss样式
首先设置cell-content的基础样式；元素饿显示和隐藏就单独拿出来通过在事件中做切换
<style lang='scss' scoped>// 对elementplus的样式修改.rule-table:deep() .cell {padding-left: 0px;padding-right: 0px;
}:deep(.el-table--border) {border: none;
}.rule-table .no-border-table :deep()tr:last-child td {border-bottom: none;
}:deep().el-table::before {width: 0%;height: 0px;
}
.rule-table .no-border-table :deep()th {border-right: none;
}
.rule-table .no-border-table :deep()td {border-right: none;
}// 可编辑.cell-content {cursor: pointer;.item__input {// display: none;width: 95%;/* 调整elementUI中样式 如果不需要调整请忽略 */.el-input__inner {height: 24px !important;}/* 调整elementUI中样式 如果不需要调整请忽略 */.el-input__suffix {i {font-size: 12px !important;line-height: 26px !important;}}}.item__txt {// display: block;box-sizing: border-box;line-height: 32px;padding: 0 9px;}
}
// 单独设置编辑状态和常规状态
.item-edit {.item__input {display: block;}.item__txt {display: none;}
}
.item-normal {.item__input {display: none;}.item__txt {display: block;}
}</style>
![C语言中的指针变量p,特殊表达式p[0] ，(*p)[0]，(px+3)[2] ,(*px)[3]化简方法](https://img-blog.csdnimg.cn/direct/7aeae473c17248d59c1dc0d9f3377141.png)
