当前位置: 首页 > news >正文

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: number
    max: number
    label: 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: StrikeHitRule
        column: TableColumnCtx<StrikeHitRule>
        rowIndex: number
        columnIndex: 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,
        }
        }
    }
}

相关文章:

  • 每日一题——搜索二维矩阵
  • 动态规划--斐波那契类型
  • Java基础系列:深入解析包装器类型与类型转换的奥秘与陷阱
  • C#类型转换基本概念
  • 数据结构链表的C++实现
  • 【网络编程】同步和异步、阻塞和非阻塞,I/O和网络I/O
  • 基于Matlab的人脸识别的二维PCA
  • 3.8[a]cv
  • MySQL 面试篇
  • 静态时序分析STA——2. 数字单元库-(1)
  • Uniapp 页面返回不刷新?两种方法防止 onShow 触发多次请求!
  • 网络通信Socket中多态HandleIO设计模式深度解析
  • Hive八股
  • 计算机毕业设计SpringBoot+Vue.js社区医疗综合服务平台(源码+文档+PPT+讲解)
  • 一周热点-文本生成中的扩散模型- Mercury Coder
  • 最小栈 _ _
  • set、LinkedHashSet和TreeSet的区别、Map接口常见方法、Collections 工具类使用
  • 03.08
  • 动态 SQL 的使用
  • Spark八股
  • 单页式网站模板/专业seo站长工具全面查询网站
  • 嘉兴企业做网站/优化方案怎么写
  • 北京疫情依然严重/seo单页面优化
  • 宜宾做网站公司/做好的网站怎么优化
  • 网站备案本人承诺/营销和运营的区别是什么
  • 企业网络推广网站建设/怎么建设自己的网站