[] Vue Vue introduced assembly vxe-table form

vxe-table: Vue developed based on a very good spreadsheet component, provides a wide range of operating table method, the following links

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

Documentation: https://xuliangzhan_admin.gitee.io/vxe-table/#/table/api

---

The first renderings

 

1, the installation

npm install xe-utils vxe-table

2, incorporated in main.js

① way

<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>

Way ② (recommended)

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

Vue.use(VXETable)

3, simple to use (for more see the official documents )

In Examples vue code file is as follows:

<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>