Table show error!

[FalconWu2017]

html:

<template component>
    <style type="text/css">
        .floatLeft {
            float: left;
        }

        .key {
            width: 30%;
        }

        .topBar {
            position: fixed;
            right: 100px;
        }

        .table {
            border-collapse: collapse;
        }

        .table th {
            text-align: left;
            padding: 3px 5px;
            border-bottom: 5px double #000000;
        }

        .table td {
            padding: 3px 5px;
            border-bottom: 1px solid #000;
        }

        .but {
            padding: 5px 15px;
        }
    </style>

    <div>
        <div class="topBar">
            <button class="but" id="bt_refresh" @click="refresh">刷新</button>
            <button class="but" @click="scrollToTop">回到顶部</button>
        </div>
        <header>
            <h1>数据库模型定义</h1>
        </header>
        <x-fill :value="list">
            <h1>{{$data.DbTableName}} {{$data.TableDescription}}</h1>
            <table class="table">
                <thead>
                    <tr>
                        <th>列名称</th>
                        <th>列说明</th>
                        <th>DataType</th>
                    </tr>
                </thead>
                <tbody>
                    <x-fill :value="$data.Columns" name="tableDetail"></x-fill>
                </tbody>
            </table>
        </x-fill>
        <template name="tableDetail">
            <tr>
                <td>{{$data.DbColumnName}}</td>
                <td>{{$data.ColumnDescription}}</td>
                <td>{{$data.DataType}}</td>
            </tr>
        </template>
    </div>

    <script>
        export default {
            data: {
                list: [
                    {
                        "DbTableName": "表1",
                        "TableDescription": "这是表1",
                        "Columns": [
                            {
                                "DbColumnName": "表1列1",
                                "ColumnDescription": "表1列1说明",
                                "DataType": "表1列1类型",
                            },
                            {
                                "DbColumnName": "表1列2",
                                "ColumnDescription": "表1列2说明",
                                "DataType": "表1列2类型",
                            }
                        ]
                    },
                    {
                        "DbTableName": "表2",
                        "TableDescription": "这是表2",
                        "Columns": [
                            {
                                "DbColumnName": "表2列2",
                                "ColumnDescription": "表2列2说明",
                                "DataType": "表2列2类型",
                            }
                        ]
                    },
                ],
            }
        }
    </script>
</template>  

Table content display position error：

[kirakiray]

感谢你的反馈，已确认这是个bug，现正抢修这个问题中。

[kirakiray]

修复完毕，请按照下面步骤修改你的代码：

1. 将ofajs升级到大于等于 4.5.18

<script src="https://cdn.jsdelivr.net/gh/kirakiray/ofa.js@4.5.18/dist/ofa.min.js"></script>

2. 在 tbody 的外围包裹一个 replace-temp 元素。

...
<tbody>
  <template is="replace-temp">
    <x-fill :value="$data.Columns" name="tableDetail"></x-fill>
  </template>
</tbody>
...

因为浏览器会默认将 table 内的非符合元素抛出到元素外，所以需要包裹在 template[is="replace-temp"] 元素内，具体请参考 replace-temp

[FalconWu2017]

可以了，多谢！
这个页面中的元素获取不到呢？

[kirakiray]

如果要在组件生命周期内获取，通过 shadow.$('xxxx') 来获取：

<template component>
  ...
  <script>
    export default {
      tag: "your-comp",
      data: {
        list: [
          ...
        ],
      },
      ready() {
        const target = this.shadow.$("#bt_refresh"); // 这样获取
        console.log(target);
      },
    };
  </script>
</template>

[kirakiray]

因为组件内部和外部是隔离的，如果要在 body上获取组件内的影子元素，需要先查找到对应的组件，再在shadow里进行查找：

$("your-comp").shadow.$('#bt_refresh') // 这样获取到组件内的元素

[kirakiray]

修改后的完整代码如下，可直接复制替换：

<template component>
  <style type="text/css">
    .floatLeft {
      float: left;
    }

    .key {
      width: 30%;
    }

    .topBar {
      position: fixed;
      right: 100px;
    }

    .table {
      border-collapse: collapse;
    }

    .table th {
      text-align: left;
      padding: 3px 5px;
      border-bottom: 5px double #000000;
    }

    .table td {
      padding: 3px 5px;
      border-bottom: 1px solid #000;
    }

    .but {
      padding: 5px 15px;
    }
  </style>

  <div>
    <div class="topBar">
      <button class="but" id="bt_refresh" @click="refresh">刷新</button>
      <button class="but" @click="scrollToTop">回到顶部</button>
    </div>
    <header>
      <h1>数据库模型定义</h1>
    </header>
    <x-fill :value="list">
      <div>
        <h1>{{$data.DbTableName}} {{$data.TableDescription}}</h1>
        <table class="table">
          <thead>
            <tr>
              <th>列名称</th>
              <th>列说明</th>
              <th>DataType</th>
            </tr>
          </thead>
          <tbody>
            <template is="replace-temp">
              <x-fill :value="$data.Columns" name="tableDetail"></x-fill>
            </template>
          </tbody>
        </table>
      </div>
    </x-fill>

    <template name="tableDetail">
      <tr>
        <td>{{$data.DbColumnName}}</td>
        <td>{{$data.ColumnDescription}}</td>
        <td>{{$data.DataType}}</td>
      </tr>
    </template>
  </div>

  <script>
    export default {
      data: {
        list: [
          {
            DbTableName: "表1",
            TableDescription: "这是表1",
            Columns: [
              {
                DbColumnName: "表1列1",
                ColumnDescription: "表1列1说明",
                DataType: "表1列1类型",
              },
              {
                DbColumnName: "表1列2",
                ColumnDescription: "表1列2说明",
                DataType: "表1列2类型",
              },
            ],
          },
          {
            DbTableName: "表2",
            TableDescription: "这是表2",
            Columns: [
              {
                DbColumnName: "表2列2",
                ColumnDescription: "表2列2说明",
                DataType: "表2列2类型",
              },
            ],
          },
        ],
      },
    };
  </script>
</template>

[kirakiray]

还有 @click 要改成 on:click。

[kirakiray]

🙏 再次感谢你的反馈，你的案例已加入到自动化测试案例中：

https://github.com/ofajs/Xhear/tree/main/test/cases/241009