请大佬看看!小弟想用 vue.component 生成表格,但是不知道咋搞的,咋不行呢?

发布于 2022-09-13 01:23:51 字数 1126 浏览 33 评论 0

直接上代码了。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>循环生成表格</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <table id="myTable">
        <tr>
          <th>编号</th>
          <th>人员</th>
          <th>属性</th>
        </tr>
        <each-list v-for="row in rows" v-bind:obj="row"></each-list>
    </table>

    <script>
        Vue.component('each-list', {
            props:['obj'],
            template: <tr><td>{{obj.num}}</td><td>{{obj.person}}</td><td>{{obj.attribute}}</td></tr>
        })

        var myTable = new Vue({
            el:"#myTable",
            data:{
                rows: [{num:1,person:"张龙",attribute:"外包"},{num:2,person:"赵虎",attribute:"外包"},{num:3,person:"王朝",attribute:"外包"},{num:4,person:"马汉",attribute:"本部"}]
            }
        });
    </script>
</body>
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

孤独难免 2022-09-20 01:23:51
<template v-for="row in rows">
    <each-list v-bind:obj="row"></each-list>
</template>

有问题就template,多快乐

还有:

Vue.component('each-list', {
    props:['obj'],
    template: '<tr><td>{{obj.num}}</td><td>{{obj.person}}</td><td>{{obj.attribute}}</td></tr>'
})
情痴 2022-09-20 01:23:51
<tr is="each-list" v-for="row in rows" :obj="row" :key='row.person'></tr>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文