SOURCE

var Main = {
    data() {
        return {
            isShow: "2",
            tableData: [{
                tc_name: '充40送10元', tc_price: 40, tc_zs: 10, create_time: '2021-11-29 12:00:00',
                update_time: '2021-11-29 12:00:00', opera_user: 'xxxx'
            },
            {
                tc_name: '充70送10元', tc_price: 40, tc_zs: 10, create_time: '2021-11-29 12:00:00',
                update_time: '2021-11-29 12:00:00', opera_user: 'xxxx'
            },
            {
                tc_name: '充50送10元', tc_price: 40, tc_zs: 10, create_time: '2021-11-29 12:00:00',
                update_time: '2021-11-29 12:00:00', opera_user: 'xxxx'
            },
            {
                tc_name: '充60送10元', tc_price: 40, tc_zs: 10, create_time: '2021-11-29 12:00:00',
                update_time: '2021-11-29 12:00:00', opera_user: 'xxxx'
            }
            ]
        }
    },
    methods: {
        loadContentMethod({ row }) {
            return new Promise(resolve => {
                setTimeout(() => {
                    const childCols = XEUtils.sample([
                        { type: 'seq', title: 'Sequence' },
                        { field: 'name', title: 'Name' },
                        { field: 'role', title: 'Role' },
                        { field: 'age', title: 'Age' },
                        { field: 'sex', title: 'Sex' }
                    ], XEUtils.random(3, 5))
                    const childData = XEUtils.sample([
                        { name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
                        { name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
                        { name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
                        { name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
                        { name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
                        { name: 'TEST6', role: 'Develop', age: 30, sex: '男' }
                    ], XEUtils.random(1, 5))
                    row.childCols = childCols
                    row.childData = childData
                    resolve()
                }, 500)
            })
        }
    }
};
var app = new Vue(Main).$mount('#app')

<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-toolbar>
				<template #buttons>
					<vxe-button @click="$refs.xTable1.hideColumn($refs.xTable1.getColumnByField('role'))">新增</vxe-button>
			
				</template>
			</vxe-toolbar>
			<vxe-table border :data="tableData" :expand-config="{accordion: true, lazy: true, loadMethod: loadContentMethod}">
				<vxe-table-column field="tc_name" title="套餐名称"></vxe-table-column>
				<vxe-table-column field="tc_price" title="套餐价格"></vxe-table-column>
				<vxe-table-column field="tc_zs" title="赠送金额"></vxe-table-column>
				<vxe-table-column field="create_time" title="创建时间"></vxe-table-column>
				<vxe-table-column field="update_time" title="更新时间"></vxe-table-column>
				<vxe-table-column field="opera_user" title="更新人"></vxe-table-column>
                <vxe-column title="操作" width="200">
            <template #default="{ row }">
              <vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)">编辑</vxe-button>
            <vxe-button type="text" icon="fa fa-edit" @click="editEvent(row)">停用</vxe-button>
            </template>
          </vxe-column>
			</vxe-table>
		</div>
	</template>
</div>

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

.vxe-textarea--inner {
    line-height: inherit;
}