问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

用 vue.component 生成表格，但是不知道咋搞的，咋不行呢？

头像
苏见微
    44213

    直接上代码了。

    <!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>
    vue.jsjavascripthtml前端
    阅读 1.8k
    2 个回答
    得票最新
    头像
    _usw
      3.8k2618
      ✓ 已被采纳
      <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>'
})
      头像
      杏仁酥饼
        1239
        <tr is="each-list" v-for="row in rows" :obj="row" :key='row.person'></tr>
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题