SOURCE

(function () {
    var App = {
        data() {
            const 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' }
            ]
            return {
                tableData
            }
        }
    }
    new Vue(App).$mount('#app')
})()

<script src="https://unpkg.com/vue@2.6.4">

</script>
<script src="https://unpkg.com/xe-utils">

</script>
<script src="https://unpkg.com/vxe-pc-ui@3.4.17">

</script>
<script src="https://unpkg.com/vxe-table@3.13.29">

</script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
	<div>
		<vxe-table :data="tableData" max-height="350px">
			<vxe-column type="seq" width="70"></vxe-column>
			<vxe-column type="expand" width="60">
				<template #content="{ row }">
					<div>Name：{{ row.name }}</div>
					<div>Age：{{ row.age }}</div>
                    <div>Age：{{ row.age }}</div>
                    <div>Age：{{ row.age }}</div>
                    <div>Age：{{ row.age }}</div>
                    <div>Age：{{ row.age }}</div>
				</template>
			</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>

@import url("https://unpkg.com/vxe-pc-ui@3.4.16/lib/style.css");
@import url("https://unpkg.com/vxe-table@3.13.27/lib/style.css");