el-table一格两行；概率；find

样式：
在这里插入图片描述
根据概率表头关键代码：rateRanges；
scope.row.targetHitTable.find((target:any) =>
target.targetHitRate >= range.min && target.targetHitRate <= range.max)!.targetHitNum
（1）!.是TypeScript中的非空断言操作符。非空断言告诉编译器，这个表达式的结果不会是null或undefined，避免编译时的类型检查错误。
（2）scope.row.targetHitTable.find(…) 是在targetHitTable数组中查找满足条件的对象。
（3）条件是targetHitRate在某个区间内，这里range.min和range.max是当前列的区间范围。找到后，访问该对象的targetHitNum属性。
一格两行关键：:span-method=“objectSpanMethod”
表格内容居中关键：:cell-style=“{ textAlign: ‘center’ }” :header-cell-style=“{ ‘text-align’: ‘center’ }”

<el-table :data="xxData" :span-method="objectSpanMethod" style="width: 100%":cell-style="{ textAlign: 'center' }" :header-cell-style="{ 'text-align': 'center' }"><el-table-column label="类型"><template #default="scope">{{scope.row.targetHitType}}</template></el-table-column><el-table-column label="姓名"><template #default="scope">{{scope.row.targetHitFireType}}</template></el-table-column><el-table-column v-for="(range, index) in rateRanges" :key="index" :label="range.label"><template #default="scope"><span v-if="scope.row.targetHitTable.find((target:any) => target.targetHitRate >= range.min && target.targetHitRate <= range.max)"><el-input-number v-model="scope.row.targetHitTable.find((target:any) => target.targetHitRate >= range.min && target.targetHitRate <= range.max)!.targetHitNum"  :min="0" :precision="1" :step="0.1" size="defalut" style="width: 120px;" controls-position="right"/></span></template></el-table-column></el-table>

	//按概率分表头关键代码interface RateRange {min: numbermax: numberlabel: string}const rateRanges: RateRange[] = [{ min: 0, max: 30, label: '0-30%' },{ min: 40, max: 50, label: '40%-50%' },{ min: 60, max: 70, label: '60%-70%' },{ min: 80, max: 90, label: '80%-90%' },{ min: 100, max: 100, label: '100%' }]//表格数据xxData格式strikeHitTable: [{targetHitType: '歌手',targetHitFireType: '卡布',targetHitTable:[{targetHitRate: 20,targetHitNum: 2},{targetHitRate: 45,targetHitNum: 4},{targetHitRate: 65,targetHitNum: 6},{targetHitRate: 87,targetHitNum: 8},{targetHitRate: 100,targetHitNum: 10},]},{targetHitType: '歌手',targetHitFireType: '星星',targetHitTable:[{targetHitRate: 20,targetHitNum: 2},{targetHitRate: 45,targetHitNum: 4},{targetHitRate: 65,targetHitNum: 6},{targetHitRate: 87,targetHitNum: 8},{targetHitRate: 100,targetHitNum: 10},]},{targetHitType: '演员',targetHitFireType: 'kabu',targetHitTable:[{targetHitRate: 20,targetHitNum: 2},{targetHitRate: 45,targetHitNum: 4},{targetHitRate: 65,targetHitNum: 6},{targetHitRate: 87,targetHitNum: 8},{targetHitRate: 100,targetHitNum: 10},]},{targetHitType: '演员',targetHitFireType: 'star',targetHitTable:[{targetHitRate: 20,targetHitNum: 2},{targetHitRate: 45,targetHitNum: 4},{targetHitRate: 65,targetHitNum: 6},{targetHitRate: 87,targetHitNum: 8},{targetHitRate: 100,targetHitNum: 10},]},...]//一格两行interface SpanMethodProps {row: StrikeHitRulecolumn: TableColumnCtx<StrikeHitRule>rowIndex: numbercolumnIndex: number}const objectSpanMethod = ({row,column,rowIndex,columnIndex,}: SpanMethodProps) => {if (columnIndex === 0) {// 第一列if (rowIndex % 2 === 0) {// 检查当前行和下一行的 targetHitType 是否相同if (rowIndex + 1 < ruleData.data.length && row.targetHitType === ruleData.data[rowIndex + 1].targetHitType) {return {rowspan: 2,colspan: 1,};}} else {return {rowspan: 0,colspan: 0,}}}
}