写一段vue的xtable框架
时间: 2023-11-23 12:22:23 浏览: 188
这里提供一段简单的 Vue XTable 框架示例:
<template>
<div>
<x-table :data="tableData" :columns="tableColumns"></x-table>
</div>
</template>
<script>
import XTable from 'x-table'
import 'x-table/dist/style.css'
export default {
name: 'MyTable',
components: {
XTable
},
data() {
return {
tableData: [
{ id: 1, name: 'John Doe', age: 35 },
{ id: 2, name: 'Jane Doe', age: 30 },
{ id: 3, name: 'Bob Smith', age: 42 }
],
tableColumns: [
{ field: 'id', label: 'ID' },
{ field: 'name', label: 'Name' },
{ field: 'age', label: 'Age' }
]
}
}
}
</script>
这里我们引入了 "x-table" 第三方库,并在模板中使用 x-table 组件实现了一个简单的表格展示。传递表格数据和列信息作为组件属性数据,即可展示出表格。
阅读全文