vxe-table的使用
时间: 2023-11-08 11:05:07 浏览: 56
vxe-table是一个基于Vue.js的表格组件库,提供了丰富的表格功能,包括排序、过滤、编辑和自定义模板等。使用vxe-table需要先安装它:
```
npm install xe-utils
npm install vxe-table
```
然后在Vue组件中引入并注册:
```
import Vue from 'vue'
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'
Vue.use(VXETable)
```
接着就可以在模板中使用vxe-table组件了:
```
<template>
<vxe-table :data="tableData">
<vxe-table-column type="seq" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" width="150"></vxe-table-column>
<vxe-table-column field="age" title="Age" width="100"></vxe-table-column>
<vxe-table-column field="address" title="Address"></vxe-table-column>
</vxe-table>
</template>
<script>
export default {
data () {
return {
tableData: [
{ name: 'John', age: 18, address: 'New York' },
{ name: 'Smith', age: 24, address: 'London' },
{ name: 'Tom', age: 30, address: 'Tokyo' }
]
}
}
}
</script>
```
这里的代码定义了一个简单的表格,包含四列:序号、姓名、年龄、地址。`tableData`是表格数据,通过`:data`属性绑定到表格中。