vue用全局组件和局部组件创建一个表格的代码
时间: 2023-11-27 15:24:32 浏览: 134
好的,我会根据您的要求回答问题。以下是使用全局组件和局部组件创建表格的代码示例:
全局组件:
// 定义一个全局组件
Vue.component('my-table', {
props: {
headers: Array, // 表头
data: Array // 表格数据
},
template: `
<table>
<thead>
<tr>
<th v-for="header in headers">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data">
<td v-for="value in item">{{ value }}</td>
</tr>
</tbody>
</table>
`
})
// 在Vue实例中使用my-table组件
new Vue({
el: '#app',
data: {
headers: ['姓名', '年龄', '性别'],
items: [
{name: '小明', age: 18, gender: '男'},
{name: '小红', age: 20, gender: '女'},
{name: '小刚', age: 19, gender: '男'},
]
},
template: `
<div>
<my-table :headers="headers" :data="items"></my-table>
</div>
`
})
局部组件:
// 定义一个局部组件
var myTable = {
props: {
headers: Array, // 表头
data: Array // 表格数据
},
template: `
<table>
<thead>
<tr>
<th v-for="header in headers">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data">
<td v-for="value in item">{{ value }}</td>
</tr>
</tbody>
</table>
`
}
// 在Vue实例中使用myTable组件
new Vue({
el: '#app',
components: {
'my-table': myTable
},
data: {
headers: ['姓名', '年龄', '性别'],
items: [
{name: '小明', age: 18, gender: '男'},
{name: '小红', age: 20, gender: '女'},
{name: '小刚', age: 19, gender: '男'},
]
},
template: `
<div>
<my-table :headers="headers" :data="items"></my-table>
</div>
`
})
阅读全文