baidu / san-ssr

San SSR framework and utils
https://baidu.github.io/san-ssr/
37 stars 21 forks source link

table 标签导致 [SAN REVERSE ERROR] Element not found. #129

Closed zhmushan closed 3 years ago

zhmushan commented 3 years ago
// 数据预处理

export class Controller extends ControllerBase<CardAData, ParsedData> {
    ssrOnly = false;
    isRightCard = true;

    /**
     * @enableValidate 1
     * @vSample 0.01
     * @vMode 1
     */
    parseData(): ParsedData {
        const dataGroup = [
            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            [11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        ]

        return {dataGroup};
    }
}
<style lang="less" module>
.hello {
    color: red;
}
</style>

<template>
    <table>
        <tbody s-for="group, groupIndex in dataGroup">
            <tr s-for="item, index in group">
                <td>
                    <span>{{item}}</span>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script lang="ts">
import {Component} from 'san';
export default class ResultComponent extends Component {
    initData() {
        return {
            dataGroup: []
        }
    }
}
</script>

image

<table> 相关元素都替换成 <div> 后不复现, 将预处理中的数据直接放到 san 文件中来 set 也不复现

将数组中每个 item 数据设置为 15 条后也不复现

meixg commented 3 years ago

san@3.10.10 san-ssr@4.9.0

没有复现,发一下你使用的版本吧,或者升级版本看看问题有没有解决。

meixg commented 3 years ago

发一下我这边的测试 case,你看看 ssr 产物是否有 diff,再用不同版本的 san 反解试试。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>start - for</title>
</head>

<body>
    <script src="./node_modules/san/dist/san.js"></script>
    <div id="root">
        <table><!--s-data:{"dataGroup":[[1,2,3,4,5,6,7,8,9,10],[11,12,13,14,15,16,17,18,19,20]]}-->
        <tbody>
            <tr>
                <td>
                    <span>1</span>
                </td>
            </tr><tr>
                <td>
                    <span>2</span>
                </td>
            </tr><tr>
                <td>
                    <span>3</span>
                </td>
            </tr><tr>
                <td>
                    <span>4</span>
                </td>
            </tr><tr>
                <td>
                    <span>5</span>
                </td>
            </tr><tr>
                <td>
                    <span>6</span>
                </td>
            </tr><tr>
                <td>
                    <span>7</span>
                </td>
            </tr><tr>
                <td>
                    <span>8</span>
                </td>
            </tr><tr>
                <td>
                    <span>9</span>
                </td>
            </tr><tr>
                <td>
                    <span>10</span>
                </td>
            </tr>
        </tbody><tbody>
            <tr>
                <td>
                    <span>11</span>
                </td>
            </tr><tr>
                <td>
                    <span>12</span>
                </td>
            </tr><tr>
                <td>
                    <span>13</span>
                </td>
            </tr><tr>
                <td>
                    <span>14</span>
                </td>
            </tr><tr>
                <td>
                    <span>15</span>
                </td>
            </tr><tr>
                <td>
                    <span>16</span>
                </td>
            </tr><tr>
                <td>
                    <span>17</span>
                </td>
            </tr><tr>
                <td>
                    <span>18</span>
                </td>
            </tr><tr>
                <td>
                    <span>19</span>
                </td>
            </tr><tr>
                <td>
                    <span>20</span>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
    <script>

    let MyApp = san.defineComponent({
        template: `<table>
            <tbody s-for="group, groupIndex in dataGroup">
                <tr s-for="item, index in group">
                    <td>
                        <span>{{item}}</span>
                    </td>
                </tr>
            </tbody>
        </table>`,
        initData () {
            return {
                dataGroup: [
                    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                    [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
                ]
            }
        }
    })
    let myApp = new MyApp({el: document.getElementById('root').firstElementChild});
    myApp.attach(document.getElementById('root'));
    </script>
</body>
</html>