Vue3整合VxeTable
VxeTable官网:https://gitee.com/xuliangzhan_admin/vxe-table安装npm install xe-utils vxe-table@nextmain.ts中注册import {createApp} from 'vue'//vxe-tableimport 'xe-utils'import VXETable from 'vxe-table'import '
·
VxeTable官网:https://gitee.com/xuliangzhan_admin/vxe-table
安装
npm install xe-utils vxe-table@next
main.ts中注册
import {createApp} from 'vue'
//vxe-table
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
const app = createApp(App)
app.use(VXETable)
app.mount('#app')
页面使用
<template>
<div>
<vxe-table border="inner" :data="tableData">
<vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="sex" title="性别"></vxe-table-column>
<vxe-table-column field="address" title="籍贯"></vxe-table-column>
</vxe-table>
</div>
</template>
<script>
import {ref} from 'vue'
export default {
name: "Home",
data() {
let tableData = ref( [
{
id: 10001,
name: "张三",
sex: "男",
address: "北京市"
},
{
id: 10002,
name: "李四",
sex: "女",
address: "上海市"
},
{
id: 10003,
name: "王五",
sex: "男",
address: "广州市"
}
])
return {
tableData
};
}
};
</script>
页面效果
更多推荐
已为社区贡献15条内容
所有评论(0)