codepen 在线演示 vxe-table

vxe-table 没有在线运行的地址，利用跟element ui 用到的codepen来运行

HTML

template内容自行更换

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table@legacy"></script>
<div id="app">
<template>
  <div>
    <div>
    <vxe-toolbar>
      <template #buttons>
        <vxe-button @click="allAlign = 'left'">居左</vxe-button>
        <vxe-button @click="allAlign = 'center'">居中</vxe-button>
        <vxe-button @click="allAlign = 'right'">居右</vxe-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      :align="allAlign"
      :data="tableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
    </vxe-table>
  </div>
  </div>
</template>
</div>

css

@import url("https://cdn.jsdelivr.net/npm/vxe-table@legacy/lib/style.css");

js

js 内容 data…自行更换

var Main = {
    data() {
      return {
        allAlign: null,
        tableData: [
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
          { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
        ]
      }
    },
  	methods: {
	
 	 },
    mounted() {

    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')