SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
  data() {
    return {
      tableData: [
          {name: '张三', sex: '男', date: '2020-01-01'},
          {name: '李四', sex: '女', date: '2020-01-01'},
          {name: '王五', sex: '男', date: '2020-01-01'},
          {name: '老六', sex: '女', date: '2020-01-01'},
          {name: '老七', sex: '男', date: '2020-01-01'}
      ]
    }
  }
};
var app = new Vue(Main).$mount('#app')
<!-- 引入样式 -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->

<div id="app">
  <template>
    <div>
      <vxe-table :data="tableData">
        <vxe-column type="seq" title="序号"></vxe-column>
        <vxe-column field="name" title="名字"></vxe-column>
        <vxe-column field="sex" title="性别"></vxe-column>
        <vxe-column field="date" title="日期"></vxe-column>
      </vxe-table> 
    </div>
  </template>
</div>