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

水深无声 2023-07-10 14:26 33阅读 0赞

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

git：[https://gitee.com/xuliangzhan\_admin/vxe-table][https_gitee.com_xuliangzhan_admin_vxe-table]

文档：https://xuliangzhan\_admin.gitee.io/vxe-table/\#/table/api

--------------------

**先上效果图**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70][]

### 1、安装 ###

npm install xe-utils vxe-table

### 2、在 main.js 中引入 ###

方式①

方式②（推荐）

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>

[https_gitee.com_xuliangzhan_admin_vxe-table]: https://gitee.com/xuliangzhan_admin/vxe-table
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303120131159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ==,size_16,color_FFFFFF,t_70