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

  • Z时代
  • 2024-02-27
  • 分类：IT

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

直接上代码了。

<!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>

回答：

<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>'
})

回答：

<tr is="each-list" v-for="row in rows" :obj="row" :key='row.person'></tr>

以上是 用 vue.component 生成表格，但是不知道咋搞的，咋不行呢？ 的全部内容， 来源链接： utcz.com/p/936120.html

回到顶部