vue 中引入表格组件 vxe-table

1、引入

vxe-table：一款基于 Vue 开发出来的非常优秀的表格组件，提供了各类操作表格的方法
1、安装
npm install xe-utils vxe-table // 引入
npm install xe-utils vxe-table@3 // 版本引入
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>