table表头与左侧数据相对应渲染表格，如果两者都包含相同数据则红色对号，否则黑色显示_table矩阵形式的表格,表头和最左侧的一列是相同的,怎么使newvalue[i][j]变化,new-CSDN博客

本文链接：https://blog.csdn.net/qq_72760247/article/details/132364011
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        table, td{
    border: 1px solid #000000;
    border-collapse: collapse;
}
.color-red {
  color: red;
}
    </style>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0">
            <!-- 表头 -->
            <thead >
              <tr >
                <!-- 合并的表头单元格 -->
                <th colspan="2" >权益</th>
                <th  v-for="item in tableData[0].result" :key="item.id">{{item.name}}</th>
              </tr>
            </thead>
            <tbody v-for="item in leftData[0].result" :key="item.id">
                <tr >
                  <!-- 数据列1 -->
                  <td rowspan="5">{{ item.name }}</td>
                </tr>
                <tr v-for="childItem in item.children" :key="childItem.id">
                  <td>{{childItem.name}}</td>
                  <td  v-for="programa in tableData[0].result" :key="programa.id">
                    <i v-if="compareNames(childItem.name, programa.programaList)" class="el-icon-check color-red"></i>
                    <template v-else><i class="el-icon-check"></i></template>
                  </td>
                  <!-- el-icon-check color-green -->
                </tr>
              </tbody>
          </table>
      </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: function() {
            return {
                tableData1: [
        { id: 1, column1: '数据1', column2: '数据2' },
        // 其他数据行...
      ],
                tableData: [
                    //   表头接口返回数据
                    {
                        "success": true,
                        "message": "操作成功！",
                        "code": 200,
                        "result": [
                            {
                                "name": "一级会员",
                                "programaList": [
                                    {
                                    
                                        "name": "行业情报",
                                       
                                    },
                                  
                                ]
                            },
                            {
                                "name": "二级会员",
                                "programaList": [
                                    {
                                        "name": "专家观点",
                                    },
                                  
                                ]
                            },
                        ],
                        "timestamp": 1692320942109
                    },
                ],

                leftData: [
                    // 左侧列返回数据，固定两层
                    {
                        "success": true,
                        "message": "操作成功！",
                        "code": 200,
                        "result": [
                            {
                                "name": "情报要闻",
                                "children": [
                                    {
                                        "name": "专家观点",
                                    },
                                    {
                                        "name": "时政要闻",
                                    },
                                    {
                                        "name": "能源数据",
                                    },
                                    {
                                        "name": "产品产量",
                                    },
                                ]
                            },
                        ],
                        "timestamp": 1692321234270
                    }

                ]
            }
        },
        methods: {
            compareNames(childItemName, programaList) {
              let a=  programaList.find(item=>item.name==childItemName)
       if(a){
           return true
       }else{
           return false
       }
    },
          }
      })
    </script>
</body>
</html>