【Vue】Vue 中引入表格组件 vxe-table

vxe-table：一款基于 Vue 开发出来的非常优秀的表格组件，提供了各类操作表格的方法，相关链接如下

git：https://gitee.com/xuliangzhan_admin/vxe-table

文档：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api

---

先上效果图

 

1、安装

npm install xe-utils vxe-table

2、在 main.js 中引入

方式①

<link rel="stylesheet" href="https://unpkg.com/vxe-table/lib/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vxe-table"></script>

方式②（推荐）

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

3、简单使用（更多详见官方文档）

在 vue 实例文件中代码如下：

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="序号" width="80"></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>
export default {
  data () {
    return {
      tableData: [
        {
          id: 10001,
          name: '名字1',
          role: '角色',
          sex: '男',
          address: '深圳市 圳市 市 xxx'
        }
      ]
    }
  }
}
</script>

<style scoped>
</style>