SOURCE

console 命令行工具 X clear

                    
>
console
(function () {
    var App = {
        data() {
            return {
                tableData: [],
                gridOptions: {
                    border: true,
                    columns: [
                        { type: 'seq', width: 60 },
                        { field: 'name', title: 'Name' },
                        { field: 'sex', title: 'Sex' },
                        { field: 'date', title: 'Date' },
                        { field: 'address', title: 'Address' }
                    ],
                    data: []
                },
                tableRef: null
            }
        },
        methods: {
            mergeCell() {
                console.log(!!this.$refs.tableRef.setMergeCells)
                this.$refs.tableRef.setMergeCells([{ row: 0, col: 0, rowspan: 3 }]);
            }
        },
        mounted() {
            var list1 = []
            var list2 = []
            for (var index = 0; index < 100; index++) {
                list1.push({
                    name: 'test1111111111111111111111111111' + index,
                    role: 'developer',
                    sex: 'Man',
                    date: '2019-05-01',
                    time: 1556677810888 + index * 500,
                    region: 'ShenZhen',
                    address: 'address abc' + index
                })
                list2.push({
                    name: 'test' + index,
                    role: 'developer',
                    sex: 'Man',
                    date: '2019-05-01',
                    time: 1556677810888 + index * 500,
                    region: 'ShenZhen',
                    address: 'address abc' + index
                })
            }
            this.tableData = list1
            this.gridOptions.data = list2
        }
    }
    new Vue(App).$mount('#app')
})()
  <!-- Use style -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui@3.5.25/lib/style.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@3.15.4/lib/style.min.css">
  
  <!-- Use vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <!-- Use vxe -->
  <script src="https://cdn.jsdelivr.net/npm/xe-utils@3.7.4/dist/xe-utils.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui@3.5.25/lib/index.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vxe-table@3.15.4/lib/index.umd.min.js"></script>
  <!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->

<div id="app">
    <div>
      <p>Table 演示</p>
      <vxe-table
        ref="tableRef"
        border
        show-overflow
        height="400"
        :data="tableData">
        <vxe-column field="name" title="Name" width="300px"fixed="left" ></vxe-column>
        <vxe-column field="sex" title="Sex" width="300px"></vxe-column>
        <vxe-column field="date" title="Date" width="300px"></vxe-column>
        <vxe-column field="address" title="Address" width="200px"></vxe-column>
      </vxe-table>
      <vxe-button @click="mergeCell">Click</vxe-button>
    </div>
</div>