kinbod commented 3 months ago

Bug report 🐞

Version & Environment

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<div id="app">
 <var-row :gutter="[10,10]">
                <var-col :span="8" direction="row">
                    <var-button type="primary">b1</var-button>
                    <var-button type="info">b1</var-button>
                    <var-button type="success">b1</var-button>
                    <var-button type="warning">b1</var-button>
                    <var-button type="danger">b1</var-button>
                    <var-button loading type="primary">b1</var-button>
                    <var-button loading loading-type="wave" type="primary">b1</var-button>
                </var-col>
        <var-divider></var-divider>
        <var-col :span="16" direction="row">
            <var-space :size="[10,10]" direction="row">
                <var-input variant="outlined" placeholder="查询1" v-model="userName"></var-input>
                <var-input variant="outlined" placeholder="查询2" v-model="versionType"></var-input>
                <var-input variant="outlined" placeholder="查询2" v-model="versionNo"></var-input>
                <var-input variant="outlined" placeholder="查询3" v-model="createTime"></var-input>
                <var-button type="primary" style="margin-top: 18px;">查询</var-button>
                <var-button type="danger" style="margin-top: 18px;">重置</var-button>
            </var-space>
        </var-col>
        <var-divider></var-divider>
    </var-row>
    <var-table :full-width="100">
        <thead>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>耗子君</td>
            <td>124</td>
            <td>38</td>
        </tr>
        <tr>
            <td>火猫桑</td>
            <td>100</td>
            <td>135</td>
        </tr>
        </tbody>
    </var-table>

</div>

</body>
<!-- 页面底部js¨ -->

<!-- Add the following at the end of your body tag -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/@varlet/ui/umd/varlet.js"></script>

<script>

    <!-- 数据操作区域 -->
    const app = Vue.createApp({
        setup() {
             let userName = Vue.ref(null);
             let versionNo = Vue.ref(null);
             let versionType = Vue.ref(null);
             let createTime = Vue.ref(null);
             debugger
             return {userName, versionType, versionNo, createTime}
        },
        data() {
            return {}
        },
        methods: {},
        mounted() {
        },
    })

    // Varlet.Locale.add('zh-CN','Locale.zhCN');
    // Varlet.Locale.use('zh-CN');
    app.use(Varlet).mount('#app')
</script>
</html>

Expectation

1712470528599

Actual results (or Errors)

1712470528599

Reproduction link

haoziqaq commented 3 months ago

这是由于 vue 的限制，写在 dom 中的模板必须是标准的 html 语法，所以只能放在 template 选项里。

kinbod commented 3 months ago

这是由于 vue 的限制，写在 dom 中的模板必须是标准的 html 语法，所以只能放在 template 选项里。

那var-button和其他标签为什么可以识别呢？

kinbod commented 3 months ago

那里面的var-button为什么可以正常识别

从 Windows 版邮件https://go.microsoft.com/fwlink/?LinkId=550986发送

发件人: haoziqaq @.> 发送时间: Sunday, April 7, 2024 2:54:07 PM 收件人: varletjs/varlet @.> 抄送: Bodkin Quan @.>; Author @.> 主题: Re: [varletjs/varlet] table not work (Issue #1576)

image.png (view on web)https://github.com/varletjs/varlet/assets/24223652/3636e670-7f87-4edc-90eb-8d53453aeb8f

这是由于 vue 的限制，写在 dom 中的模板必须是标准的 html 语法，所以只能放在 template 选项里。

― Reply to this email directly, view it on GitHubhttps://github.com/varletjs/varlet/issues/1576#issuecomment-2041340788, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AB7CR5KV2NMROHFSSX3BYNLY4DUQ7AVCNFSM6AAAAABF3BVFKWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBRGM2DANZYHA. You are receiving this because you authored the thread.Message ID: @.***>

haoziqaq commented 3 months ago

因为在 html 中，tbody 和 thead 必须在 table 元素中，所以这样的模板不属于标准的 html 模板。包括自闭合标签，一样也是无效的。var-button 因为符合标准 html 标签的规则，它会被认为是自定义元素存在。

haoziqaq commented 3 months ago

建议就是所有的 vue 模板都写在 template 选项里，这样可以保证 vue 的所有模板编译器特性都能被使用。字符串高亮可以参考官方的推荐，使用 es6-string-html 插件。

kinbod commented 3 months ago

好的，感谢，这下明白了

从 Windows 版邮件https://go.microsoft.com/fwlink/?LinkId=550986发送

发件人: haoziqaq @.> 发送时间: Sunday, April 7, 2024 3:06:08 PM 收件人: varletjs/varlet @.> 抄送: Bodkin Quan @.>; Author @.> 主题: Re: [varletjs/varlet] table not work (Issue #1576)

因为在 html 中，tbody 和 thead 必须在 table 元素中，所以这样的模板不属于标准的 html 模板。包括自闭合标签，一样也是无效的。var-button 因为符合标准 html 标签的规则，它会被认为是自定义元素存在。

― Reply to this email directly, view it on GitHubhttps://github.com/varletjs/varlet/issues/1576#issuecomment-2041343799, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AB7CR5LXJSNGJ6ATUJUJRBDY4DV6BAVCNFSM6AAAAABF3BVFKWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANBRGM2DGNZZHE. You are receiving this because you authored the thread.Message ID: @.***>

haoziqaq commented 3 months ago

不客气

varletjs / varlet

table not work #1576

Bug report 🐞

Version & Environment

Expectation

Actual results (or Errors)

Reproduction link