表格内的列显示为树状结构,可展开/收缩 >[info] 显示效果 ![](https://img.kancloud.cn/86/2f/862fb60177a5c872cdd4547ee5be2c41_1051x502.png) >[info] 示例代码 ``` <template> <div class="page-container"> <!--表格树内容栏--> <el-table :data="goodsCatTreeData" element-loading-text="$t('action.loading')" size="mini" stripe style="width: 100%;" v-loading="loading"> <table-tree-column @sendTreeData="getTreeData" label="名称" minWidth="280" prop="name" treeKey="id"></table-tree-column> </el-table> </div> </template> <script> import tableTreeColumn from '@/components/core/table_tree_column' export default { components: { tableTreeColumn }, data () { return { loading: false, goodsCatTreeData: [] } }, watch: { goodsCatTreeData: { // 深度监听,可监听到对象、数组的变化 handler (val, oldVal) { console.log(`goodsCatTreeData变化: ${oldVal ? oldVal.length : 0} -> ${val ? val.length : 0}`)// 但是这两个值打印出来却都是一样的 }, deep: true } }, methods: { getTreeData (data) { if (data) { this.goodsCatTreeData = data } else { console.log('data 这空值') } }, } } </script> ``` >[info] 事件说明 ``` sendTreeData:事件回调,参数:data ```